div 内的 div，100% 高度使溢出屏幕答案

【问题标题】：Div inside of div, 100% height makes overflow off screendiv 内的 div，100% 高度使溢出屏幕
【发布时间】：2013-12-08 16:00:59
【问题描述】：

我花了 2 天时间试图解决这个问题，但我做不到。如有任何帮助，我将不胜感激。

我有一个容器设置为垂直填充 100%，这很好。在容器中，我的标题有另一个 div。在标题下方，我希望另一个 div 也垂直填充 100%（从标题底部到屏幕底部），无论内容有多少。问题是，当我将此 div 的高度设置为 100% 时，即使其中没有其他内容，它也会溢出浏览器窗口的底部。只是一个长长的空白。溢出的大小与我的标题相同。

如果我删除我的标题，它工作正常。如果我告诉这个 div 不是 100%，那么它只会深入到内容强制它的深度，这在某些情况下是不够的。我尝试使用溢出：隐藏，但随后隐藏了我在 div 上的阴影效果。

You can view the page here

有问题的代码在这里：

#container {
    height: 100%;
    position: relative;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: -80px;
}

#bodybox {
    height: 100%;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: -80px;
    background-color: #FFF;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}

您会注意到我的页脚悬停在底部。那是因为溢出。我正在使用this sticky footer solution，以防万一。

我在 CSS 方面有点新手，我真的想避免过度使用 Photoshop 或表格，但我似乎无法获得任何提示或建议来解决这个问题。请帮忙。谢谢。

【问题讨论】：

body box 容器正在做它应该做的事情。它的高度等于其父容器高度的 100%。它溢出的原因是因为标题正在向下推body box div。找到解决方案后会发布解决方案。
这是另一个与您有关的问题stackoverflow.com/questions/3411317/…

标签： css html

【解决方案1】：

如果您将元素设置为具有相对高度/宽度（带有百分比），则高度/宽度将相对于它的直接父级（如果某些例外不适用，我不会在这里解释）。但这并没有考虑到定位。因此，您的内容 div 具有您要求的高度，但是由于它被标题向下推，它看起来更高。

你可以使用 calc 来计算你想要的高度，或者使用 oldschool push back 方法。

您从构建容器、标题和内容 div 开始：

<div class="conatiner">
    <div class="header"></div>
    <div class="content"><h1>My Content</h1></div>
</div>

并应用一些样式：

.container { width: 300px; height: 100%; } /* height can be anything */
.header { width: 100%; height: 100px; } /* header SHOULD have a fixed height */
.content { width: 100%; height: 100%; }

然后你添加到.content div 的样式：margin-top: -100px;，其中100px 应该与标题相同的高度。前面的减号告诉浏览器将其拉回而不是向下推。

现在您还有两个问题要解决。第一个是内容 div 覆盖了标题 div。您可以通过应用z-index 来解决这个问题，尽管这也需要您添加position（因为z-index 仅适用于定位元素）。所以将这两个规则添加到标题和内容中：

z-index: 1/0; /* header has z-index: 0, content has z-index: 1 */
position: relative; /* to 'activate' z-index 'behavior' */

现在我们快到了，但您可能会看到内容也消失在标题后面。要解决此问题，请在内容 div 中添加填充：

.content { padding-top: 100px; } /* again the 100px should be the same as the header height */

现在，如果您再次看到内容 div 被向下推，请不要绝望。那是因为填充加起来就是高度。幸运的是我的好朋友box-sizing 帮助了我们！

.content { box-sizing: border-box; -moz-box-sizing: border-box; }

还有here we are（小提琴）！

注意：还有一些其他策略，例如，内容 div 和/或标题的绝对定位，使用 calc 函数等。选择最适合您的。

【讨论】：

【解决方案2】：

试试

#bodybox{
height: calc(100% - 142px);
...

其中 142px 是标题的高度。 Calc 根据括号中的算术计算高度。请注意，该等式不会在运算符前后没有空格。同样的公式也可以用来抵消边距的影响。

【讨论】：

【解决方案3】：

快速修复：

#header_bkgd {
overflow: hidden;
}

【讨论】：

【解决方案4】：

这样做：

CSS：

#bodybox{
 margin-bottom: -80px; //Remove
 // rest of the css
}

#container {
    margin: 0
}

【讨论】：

【解决方案5】：

我猜这与他们都有 80px 的边距底部这一事实有关？一个正在起飞另一个迫使它溢出。

【讨论】：