好的,首先我将支持 IE7,所以盒子大小已经过时了。
我有一个固定大小的页眉和页脚(例如每个 80 像素),分别位于窗口的顶部和底部。
我想要一个 div 占据其之间的所有空间,无论窗口大小如何。使用 JavaScript 很轻松,但是有没有办法只使用 CSS 来做到这一点?
http://jsfiddle.net/ZLrPF/ http://jsfiddle.net/ZLrPF/基于我的詹姆斯·迪恩粘性页脚http://mystrd.at/modern-clean-css-sticky-footer http://mystrd.at/modern-clean-css-sticky-footer可以做到这一点。 IE7 需要一点额外的爱,这是可以做到的。
Edit:
这是将按要求工作的 IE7+ 解决方案。
html {
height: 100%;
}
body {
margin: 0;
width: 100%;
height: 100%;
display: table;
}
#header-wrapper, #content-wrapper, #footer-wrapper {
display: table-row;
}
#header, #content, #footer {
display: table-cell;
}
#header, #footer {
height: 80px;
background-color: orange;
}
#content {
background-color: green;
}
<body>
<div id="header-wrapper">
<div id="header">header</div>
</div>
<div id="content-wrapper">
<div id="content">content</div>
</div>
<div id="footer-wrapper">
<div id="footer">footer</div>
</div>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)