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

Question

我花了 2 天的时间试图解决这个问题，但我不能。我很感激任何帮助。

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

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

你可以在这里查看页面

有问题的代码在这里：

#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);
}

你会注意到我的页脚悬停在底部。那是因为溢出。我正在使用这个粘性页脚解决方案，以防万一这很重要。

我是 CSS 的新手，我真的很想避免过度使用 Photoshop 或表格，但我似乎无法得到任何解决此问题的提示或建议。请帮忙。谢谢。

Answer 1

尝试

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

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