Question

我现在正试图设计一个网页，这有点难。

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

主div的高度必须完全改变，因为我想在该div中放置一个Google Maps，所以这个div的高度很重要。

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

现在我不知道做这项工作。我该怎么办？

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

Answer 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/

Answer 2

使用标题的设置高度，并使用sticky footer将页脚保持设置高度并与底部对齐。之间的空间应始终是正确的高度。

Answer 3

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

Answer 4

这是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>

CSS如何将div高度设置为100％减去一些像素

4 个答案: