Question

好的，所以我知道这个主题有很多问题，但我仍然无法确切地知道如何使这项工作。 This已接近问题，但它对我不起作用。

我希望我的页面有100％的高度。在这个页面里面是一个高度为40px的静态标题，然后是剩余高度（100％ - 40px）的内容。

HTML：

<body>
     <div id="page">
          <div id="header">
             header
          </div>
          <div id="content">
             content
          </div>
      </div>
 </body>

CSS：

html, body
{
     height: 100%;
     margin: 0px;
}

#page
{
    min-height: 100%;      
}

#header
{
    height: 40px;
} 

#content
{
    height: 100%;
    position: absolute;
    top: 0;
    padding-top: 40px;        
}

这是对代码的解释：

我向内容添加了position: absolute，否则由于某种原因它不会占用其容器#page的100％
然后问题是它超出了页面的边界，这就是我添加top：0的原因。
然后#content的内容与标题重叠，因此我添加了padding-top: 40px
现在#content再次超出页面边界

有什么建议吗？谢谢。

Answer 1

这应该有效：

http://jsfiddle.net/94JNZ/1/

#content
{
    height: auto;
    width: 100%;
    position: absolute;
    top: 40px;
    bottom: 0;
}

Answer 2

这是一篇关于这个问题的文章。 CSS 100% height problem

您可以看到示例页面具有完美的100％布局页眉和页脚。它使用相对位置而不是绝对位置。

Answer 3

您可以使用box-sizing属性

检查一下：

http://jsfiddle.net/Gn8zN/1/

另一个简单＆amp;最佳解决方案

检查一下：

http://jsfiddle.net/B8J2H/

Answer 4

使用 flex：1;

html, body
{
     height: 100%;
     margin: 0px;
}

#page
{
    min-height: 100%;      
    display: flex;
  flex-direction: column;
}

#header
{
display: flex;
    height: 40px;
    background-color:red;
} 

#content
{
    display: flex;
  flex: 1;    
  background-color:blue;
}

<body>
     <div id="page">
          <div id="header">
             header
          </div>
          <div id="content">
             content
          </div>
      </div>
 </body>

Answer 5

只需编写脚本：

<script type="text/javascript">
function contentSize()
{
    document.getElementById('content').style.height=(window.availHeight-40)+"px";
}
onload=contentSize;
onresize=contentSize;
<script>

Div高度100％，不包括标题

5 个答案:

http://jsfiddle.net/Gn8zN/1/

http://jsfiddle.net/B8J2H/