我是 CSS 新手，我正在尝试创建模板的准系统结构。
我有一个用于页眉、主要内容和页脚的 div。我的页脚和页眉很好，但我需要主要内容 div 来“填充”页眉和页脚之间的剩余空间。我尝试将 padding-bottom 属性设置为与页脚相同的高度，但它并没有关闭与页脚的间隙，它只是将 div 的高度设置为 padding-bottom 值。
My 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() https://developer.mozilla.org/en-US/docs/Web/CSS/calc为您.main-content
.main-content {
border:2px dashed blue;
border-radius:5px;
padding:10px;
height: calc(100% - 300px);
}
Demo http://jsfiddle.net/dmQgs/
另外，我在这里和那里调整了一些东西，例如，你不需要padding-bottom不再，也，而不是使用min-height: 100%;你应该使用height: 100%;，并且不要使用大小写标签，保持只用小写字母书写标签的习惯。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
