告诉我如何在不使用JavaScript的情况下进行半液体布局，我觉得我缺少一些简单的东西 [英] Tell me how to do the semi liquid layout without javascript, i feel I'm missing something simple
问题描述
好的，首先我要支持IE7，因此无法进行大小调整.
Okay, first off I'm supporting back to IE7, so box-sizing is out.
我在窗口的顶部和底部分别放置了一个固定大小的页眉和页脚(每个80px).
I've got a fixed size header and footer (say 80px each) positioned to the top and bottom of the window, respectively.
我希望div占用他之间的所有空间，而不管窗口大小如何.使用JavaScript轻而易举，但是有没有办法仅使用CSS?
I want a div to take up all he space between, regardless of window size. Easy breezy with JavaScript, but is there a way to do it with just CSS?
推荐答案
http://jsfiddle.net/ZLrPF/基于我的James Dean粘性页脚 http://mystrd.at/modern-clean -css-sticky-footer 可以做到. IE7需要一点额外的爱，这可以做到.
http://jsfiddle.net/ZLrPF/ based on my James Dean sticky footer http://mystrd.at/modern-clean-css-sticky-footer can do that. IE7 would need a little extra love, which can be done.
这是IE7 +解决方案，可以按要求工作.
This is the IE7+ solution that will work as requested.
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>
这篇关于告诉我如何在不使用JavaScript的情况下进行半液体布局，我觉得我缺少一些简单的东西的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
