我正在尝试创建一个带有“标题”区域的布局,其中包含一个标志和一些链接,然后是一个需要扩展到页面底部的内容区域.这是我被卡住的地方.
我已经用标题和内容包围了一个高度为100％的容器div,这样可以正常工作.但是我不能让内容div伸展到容器div的底部,因为它的最小高度为100％似乎从页面主体的高度,所以我最终得到一个滚动条由于空间在页面的顶部被标题占用.
这是一个有希望使我想要实现的线框更清晰的线框
这是一个快速的CSS示例,这个工作,除了总是有一个滚动条,其中似乎是标题区域的高度…
html,body {
height: 100%;
margin: 0;
padding: 0;
color: #fff;
}
body {
background-color: #000;
}
#container {
position: relative;
margin: 0 auto;
width: 1000px;
min-height: 100%;
}
#header {
padding-top: 26px;
}
#logo {
width: 194px;
height: 55px;
margin: 0 auto;
background-color: #fff;
}
#content {
margin-top: 10px;
position: absolute;
width: 1000px;
min-height: 100%;
background-color: #fff;
}
解决方法
http://jsfiddle.net/CZayc/
这通过将标题和正文放在div中以将页脚放下来
的index.html
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
style.css文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
background-color: green;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
height: 90%
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
background-color:blue;
}
