问题
Okay, first off I'm supporting back to IE7, so box-sizing is out.
I've got a fixed size header and footer (say 80px each) positioned to the top and bottom of the window, respectively.
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?
回答1:
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.
Edit:
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>
回答2:
You should use a sticky footer. Example : http://ryanfait.com/sticky-footer/
来源：https://stackoverflow.com/questions/9946064/tell-me-how-to-do-the-semi-liquid-layout-without-javascript-i-feel-im-missing