告诉我如何在没有javascript的情况下进行半液体布局,我觉得我错过了一些简单的东西

时间:2012-03-30 15:31:42

标签: css liquid-layout

好的,首先我要回到IE7,所以盒装大小已经出来了。

我有一个固定大小的页眉和页脚(每个80px)分别位于窗口的顶部和底部。

无论窗口大小如何,我都希望div占用所有空间。使用JavaScript轻松轻松,但有没有办法只使用CSS?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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