Question

这是我的.html文件，其中包含带有菜单标题的包装 - 侧栏 - 内容的div：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="css/style.css?v=1">
</head>

<body>
<div class="wrapper">
    <header id="header"> Header - Menu</header>

     <div class = "central-body">

        <div id = "sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div id = "main-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

    </div>

     <footer> </footer>

</div>

</body>
</html>

这是我的CSS ：

*{
margin: 0;
padding: 0; 
}

html, body{
height: 100%;
}

body{
background-color: black;
}

.wrapper{   
height: 100%;
}

#header{
background-color: blue;
height: 40px;
width: 100%;
}

.central-body{
height: 100%;
width:100%; 
background-color: purple;
}

#sidebar{
height: 100%;
width: 20%;
background-color: yellow;
float: left;
}

#main-content{
height: 100%;
background-color: green;
}

footer{
width:100%;
height: 40px;
background-color: red;
}

我的问题是我必须向下滚动“40px”以查看我的页脚，即使“侧栏”和“主要内容”中的单词很少。我该如何解决这个问题？

Answer 1

您可以使.central-body高度100％减去页眉和页脚的高度，如下所示：

height:calc(100% - 80px) //header 40px + footer 40px

我们正在使用calc来实现此目的。

（如果我们在.wrapper上进行计算

，这也会有效）

Here是一个有效的例子

代码：

.central-body {   
    height:calc(100% - 80px);
}

布局麻烦，需要向下滚动才能看到页脚

1 个答案: