设置html元素在页面上具有100％的高度 [英] Set html element to have 100% height on page with header

问题描述

如何设置html元素在具有固定高度标题的页面上具有100％的高度？

How can I set an html element to have a 100% height on a page that has a fixed height header? The layout is, of course, not fixed height.

我已经有 html 和 body 设置为正确模拟 min-height：100％。

我尝试过以下想法，但无效：

I have tried the following ideas, but to no avail:

strong>我使用了以下CSS，但它使用基于百分比的高度，这不工作，因为我的布局的头是一个固定的 81px 的高度。 p>

1. I have used the following CSS, but it uses a percentage-based height, which doesn't work well because my layout's header is a fixed 81px in height.

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

2。 padding和margin的组合，但是它们都扩展页面的高度（ hidden ），从而使它们看起来都一样：底部 81px 隐藏。

2. I have used the following in various combinations of the padding and margin, but all of them expand the height of the page (which is hidden), thereby making them all look the same: the bottom 81px are hidden.

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 。

I want my divContent to consume all of the body's height minus 81px.

我知道我可以立即使用表，但这将是不适当的使用表。我也认为它可以使用jQuery自动计算，但我没有像之前写的jQuery。

I know how I could immediately do it using tables, but that would be improper use of tables. I also figure that it could be automatically calculated using jQuery, but I haven't written jQuery like that before.

我已经看了大概十几个问题，找不到一个解决方案。

推荐答案

如果你能证明这是一个重复的事实上覆盖了同样的问题， p>将div的底部设置为0px。这将扩展div以使用页面的其余部分

Set the bottom of the div to 0px. This will expand the div to consume the rest of the page

#divContent
{

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

这是一个非常类似的问题，我回来了

Here is a very similar question I answered a while back

如何构建此布局与CSS？

这篇关于设置html元素在页面上具有100％的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！