Css 布局有问题，需要向下滚动查看页脚_Css_Html

Css 布局有问题，需要向下滚动查看页脚

css html

Css 布局有问题，需要向下滚动查看页脚,css,html,Css,Html,这是我的.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">

这是我的.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>

我的问题是，我必须向下滚动“40px”才能看到我的页脚，即使“侧边栏”和“主要内容”中几乎没有单词。如何修复此问题？

您可以将

.central body

高度100%减去页眉和页脚的高度，如下所示：

高度：计算（100%-80px）//页眉40px+页脚40px

我们正在使用

calc

来实现此功能

（如果我们在

.wrapper

上进行计算，这也会起作用）

这是一个有效的例子

代码：

您是否需要主内容和侧边栏具有相同的高度？这将是较长内容的高度。谢谢你的回答，这正是我所寻找的：D我在谷歌搜索时，在任何地方都没有读到这个解决方案，再次感谢你的时间^^没问题，很高兴它有帮助！

*{
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;
}

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