我是CSS和im tryig的新手，可以创建模板的准系统结构。
我有一个div用于页眉，主要内容和页脚。我的页脚和页眉很好，但是我需要在主要内容div中“填充”页眉和页脚之间的剩余空间。我尝试将padding-bottom属性的高度设置为与页脚相同的高度，但它并未缩小与页脚的间距，只是将div的高度设置为padding-bottom值。
我的HTML
<!DOCTYPE html>
<HTML>
<HEAD>
<LINK type="text/css" rel="stylesheet" href="main.css"/>
<TITLE>Template</TITLE>
</HEAD>
<BODY>
<div id="container">
<div class="header"></div>
<div class="main-content"></div>
<div class="footer"></div>
</div>
</BODY>
</HTML>
和层叠样式表。
#container{
min-height:100%;
position:relative;
}
.header{
border:2px dashed blue;
height:150px;
border-radius:5px;
padding:10px;
}
.main-content{
border:2px dashed blue;
border-radius:5px;
padding:10px;
padding-bottom:100px;
}
.footer{
position:absolute;
bottom:0;
width:100%;
height:100px;
border:2px dashed blue;
border-radius:5px;
}
html, body{
margin:0;
padding:1px;
height:100%;
}
你可以用calc()你的.main-content
.main-content {
border:2px dashed blue;
border-radius:5px;
padding:10px;
height: calc(100% - 300px);
}
另外，我在这里和那里做了一些调整，例如，您将不再需要padding-bottom，而不是使用min-height: 100%;，应该使用height: 100%;，并且不要使用大写-小写标签，养成在其中编写标签的习惯仅小写。