0

这些天我正在尝试设计一个有点困难的网页。

我有三个主要的div。第一个用于页眉，另一个用于页脚，第三个用于主要内容。页眉和页脚必须固定在页面的顶部和底部。它们的位置不能随着浏览器窗口大小的改变而改变。第三个 div 必须在这些 div 之间的空白处。它可以调整大小以适应窗口调整大小的页面。

主 div 的高度必须完全改变，因为我想在那个 div 中放置一个谷歌地图，所以这个 div 的高度很重要。

我尝试了很多东西，但都没有成功。将 div 设置height为 100%（而 body 和 html 的高度也是 100%）不是答案。使用表格（三行，两行固定高度，一行可变高度，with height="100%"）也有一些问题（在IE8中，当我声明 a 时doctype，第二行中的div（with height:100%）不适合单元格了！）。

现在我不知道做这项工作。我能做些什么？

注意：我不喜欢使用 CSS3，因为与旧浏览器的兼容性对我来说很重要。

4

4 回答 4

1

你可以试试这样的。

HTML 

   <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>

CSS 

#header {
    height:50px;
    width: 100%;
    background: black;
    position: fixed;
    z-index: 1;
    top: 0;
}

#body {
    height:100%;
    width: 100%;
    background: #CCC;
    position: absolute;
    z-index: 0;
}

#footer {
    height: 50px;
    width: 100%;
    background: #0CF;
    position: fixed;
    bottom: 0;
}

这是一个小提琴 - http://jsfiddle.net/6M59T/

于 2013-02-04T20:39:50.917 回答
0

为您的页眉使用设定的高度，并使用粘性页脚使您的页脚保持设定的高度并与底部对齐。之间的空间应该始终是正确的高度。

于 2013-02-04T20:32:26.847 回答
0

这是css的缺点之一。您无法仅使用这三个 div 完成您想要的。您需要使用额外的 div 来抵消页眉和页脚的高度。以下是解决此问题的方法：

<body style="height:100%; margin:0; padding:0;">
    <div id="header" style="height:50px; position: relative; z-index: inherit; background-color:lightblue;"></div>
    <div id="content" style="height:100%; margin:-50px 0 -70px 0; background-color:wheat">
        <div id="header-offset" style="height:50px;"></div>
        <div id="footer-offset" style="height:70px;"></div>
    </div>
    <div id="footer" style="height:70px; background-color:lightblue;"></div>
</body>
于 2014-02-08T10:59:06.700 回答
0

您应该尝试众所周知的Clearfix hack来处理高度问题，因为您需要“清除”父元素以获得所需的 100% 高度。

于 2013-02-04T20:37:20.023 回答