页面末尾空白

问题描述 投票:0回答:1

我是初学者,正在尝试制作此页面,但是所有内容下方都有空白,我不知道为什么。而且我的侧边栏也没有显示。会是什么呢?我的浏览器显示的图片与图片完全一样,这不是我应该设计的页面。请帮帮我!

The first partThe last part with the blank space at the end

这里是代码

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto';
}

html, body {
    height: 100%;
}

.main {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.sidebar {
    display: block;
    background-color: #2c333a;
    height: 100%;
    width: 120px;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.sidebar-content a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
}

.sidebar-content ul li:first-child {
    background-color: orange;
}

.sidebar-content ul {
    width: 100%;
    list-style: none;
    justify-content: center;
}

.icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 17px 0;
}

.teste {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: calc(100% - 120px);
}

.header {
    background-color: #fff;
    display: flex;
    height: 82px;
    justify-content: center;
    align-items: center;
    color: #495057;
    font-weight: 300;
}

.header h1 {
    font-weight: 700;
}

.header-content {
    padding: 0 10px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.header-right {
    display: flex;
    justify-content: center;
    align-items: center;
}

.header-right p {
    margin-right: 20px;
}

.header-right button {
    font-size: 16px;
    font-weight: 400;
    background-color: #fff;
    color: blue;
    border: 1px solid blue;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.main-content {
    background-color: #F0F2F7;
    height: calc(100% - 82px);
    width: 100%;
    padding: 10px;
}
<!DOCTYPE html>
<html lang="ptBR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles/styles.css" />
    <link rel="stylesheet" href="styles/icons/flaticon.css" />
    <script src="https://kit.fontawesome.com/5c8fa193c0.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="main">
        <div class="sidebar">
            <div class="sidebar-content">
                <ul>
                    <li><a href="#"><i class="fas fa-mask fa-3x" style="color: white"></i></a></li>
                    <li><a href="#">
                            <div class="icon"><i class="flaticon-superman"></i></div>
                            <p>Heróis</p>
                        </a></li>
                    <li><a href="#">
                            <div class="icon"><i class="flaticon-joker"></i></div>
                            <p>Vilões</p>
                        </a></li>
                    <li><a href="#">
                            <div class="icon"><i class="flaticon-marvel"></i></div>
                            <p>Marvel</p>
                        </a></li>
                    <li><a href="#">
                            <div class="icon"><i class="flaticon-dc"></i></div>
                            <p>DC Comics</p>
                        </a></li>
                    <li><a href="#">
                            <div class="icon"><i class="flaticon-r2d2"></i></div>
                            <p>Star Wars</p>
                        </a></li>
                    <li><a href="#">
                            <div class="icon"><i class="flaticon-question"></i></div>
                            <p>Dúvidas</p>
                        </a></li>
                </ul>
            </div>
        </div>
        <div class="teste">
            <div class="header">
                <div class="header-content">
                    <h1>Página Teste</h1>
                    <div class="header-right">
                        <p>New Post</p>
                        <p>Sign up</p>
                        <p><button>Login</button></p>
                    </div>
                </div>
            </div>
            <div class="main-content">
                <h1>Teste</h1>
            </div>
        </div>
    </div>
</body>

</html>
javascript html css
1个回答
0
投票

而不是使用100%的身高,最好使用最小高度,如:

 body {
min-height: 100vh;
} 

并且最好以::>开始CSS>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

因为这会阻止页面自动边距和填充

© www.soinside.com 2019 - 2024. All rights reserved.