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

【问题标题】：CSS How to set div height to 100% minus some pixelsCSS 如何将 div 高度设置为 100% 减去一些像素
【发布时间】：2013-01-19 15:26:49
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

添加一些代码，也许你会得到一些答案。 margin-bottom: -99 px 之类的呢？
这里有一个很好的答案，它使用纯 CSS3 并与谷歌地图一起使用 stackoverflow.com/questions/2434602/…

标签： css html resize height

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以试试这样的。

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/

【讨论】：

谢谢，但这段代码会为页面创建一个滚动条。我想要一些没有任何滚动条的页面。
你这么近，但是，但是……，我的问题好混乱！我必须为该地图添加一些边框和阴影。它不适合我！
我认为最好的方法是使用 jQuery。不可能！
user1919959 好吧，我不确定您现在在说什么。 @Ruffo 哈哈。

【解决方案3】：

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

【讨论】：

我无法理解如何使用它来解决我的问题？？！！

【解决方案4】：

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

【讨论】：

你能解释更多吗？我想我以前做过类似的事情，但没有用。
@user1919959 有点不清楚您需要什么，但如果链接上的布局是您想要的，即页眉和页脚已设置高度并与页面的各自侧对齐，并且 body 会根据窗口的内容或大小改变高度，那是我最好的建议。
好的，我知道，但是这种方法会创建滚动条，这不是我的目标。我错了吗？
@user1919959 我在示例站点上没有看到任何滚动条 - 您是否真的实现了它并获得了滚动条？你不应该
你是对的，但问题是我们不能在两个有高度的 div 中间有一个 div。由于谷歌地图，身高非常重要。我认为 JQuery 是最好的方法。