Question

我花了两天的时间试图解决这个问题，但事实并非如此。我很感激任何帮助。

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

如果我删除标题，它可以正常工作。如果我告诉这个div不是100％，那么它只会像内容强迫它一样深，这在某些情况下是不够的。我尝试使用overflow：hidden，但后来隐藏了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使用或表格，但我似乎无法获得任何提示或建议我已阅读以解决此问题。请帮忙。感谢名单。

Answer 1

试

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

其中142px是标题的高度。 Calc根据括号中的算术计算高度。注意，如果没有运算符之前和之后的空格，方程式将不会更多。同样的方程式也可以用来抵消边际的影响。

Answer 2

快速修复：

#header_bkgd {
overflow: hidden;
}

Answer 3

如果将元素设置为具有相对高度/宽度（具有百分比），则高度/宽度将相对于其直接父级（如果某些异常不适用，我将不在此解释它们）。但这并没有考虑到定位。所以你的内容div确切地具有你所要求的高度，但是因为它被标题按下，所以显示更高。

您可以使用计算来计算您想要的身高，或使用oldschool推回法。

首先构建容器，标题和内容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函数等。选择最适合你的。

Answer 4

我猜它是否有这样一个事实，即它们都有80px的保证金底部？一个正在取消另一个，迫使它溢出。

Answer 5

这样做：

CSS：

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

#container {
    margin: 0
}

Div内部的Div，100％的高度使屏幕溢出

5 个答案: