4

好的，首先我支持回到 IE7，所以 box-sizing 出来了。

我有一个固定大小的页眉和页脚（比如每个 80 像素）分别位于窗口的顶部和底部。

无论窗口大小如何，我都希望一个 div 占据他之间的所有空间。使用 JavaScript 很轻松，但是有没有办法只使用 CSS 来做到这一点？

4

2 回答 2

1

http://jsfiddle.net/ZLrPF/基于我的 James Dean 粘页脚http://mystrd.at/modern-clean-css-sticky-footer可以做到这一点。IE7需要一点额外的爱，这是可以做到的。

编辑：

这是可以按要求工作的 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>
于 2012-03-30T15:59:41.813 回答
0

您应该使用粘性页脚。示例：http ://ryanfait.com/sticky-footer/

于 2012-03-30T15:46:03.633 回答