将 html 元素设置为在带有标题的页面上具有 100% 的高度答案

【问题标题】：Set html element to have 100% height on page with header将 html 元素设置为在带有标题的页面上具有 100% 的高度
【发布时间】：2011-11-15 12:57:59
【问题描述】：

如何将 html 元素设置为在具有固定高度标题的页面上具有 100% 的高度？布局当然不是固定高度。

我已经将html 和body 设置为正确模拟min-height: 100%。

我尝试了以下想法，但无济于事：

1.我使用了以下 CSS，但它使用了基于百分比的高度，因为我的布局标题的高度是固定的 81px，所以效果不佳。

#divContent
{
    height: 82%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    width: 950px;
}

2.我在padding和margin的各种组合中使用了以下，但它们都扩大了页面的高度（即hidden），从而使它们看起来都是同样：底部81px 被隐藏。

html, body
{
    overflow: hidden;
    margin-bottom: 82px;
    padding-bottom: 82px;
}
#divContent
{
    height: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    width: 950px;
    margin-bottom: 82px;
    padding-bottom: 82px;
}

我希望我的divContent 消耗身体的所有高度减去81px。

我知道如何使用表格立即执行此操作，但那将是表格使用不当。我也认为它可以使用 jQuery 自动计算，但我之前没有写过这样的 jQuery。

附注我已经浏览了大约十几个问题，但找不到解决方案。如果你能证明这是一个实际上涵盖相同问题的副本，我很乐意阅读其他帖子。

【问题讨论】：

标签： jquery html css layout height

【解决方案1】：

将 div 的底部设置为 0px。这将扩展 div 以消耗页面的其余部分

#divContent
{

    margin: 0;
    padding: 0;
    position: absolute;
    top: 82px;
    bottom: 0px;   
    width: 950px;
}

这是我不久前回答的一个非常相似的问题

How to build this layout with CSS?

【讨论】：

我认为您的意思是删除 margin-bottom 和 padding-bottom。如果我删除这些，它的工作原理！我之前尝试过bottom 属性，但相对定位它。
不是我的意思。您应该将底部属性设置为绝对位置，以使 div 消耗剩余的可用房地产。
（我的意思是在问这个问题之前我之前尝试过不正确的底部。）当我在你的答案中使用 CSS 时，div 的底部有大量的边距/填充。我必须删除它才能获得“100%”的高度。
很好。我更新了答案并为您添加了参考。