div 高度 100% 不包括标题答案

【问题标题】：Div height 100% excluding headerdiv 高度 100% 不包括标题
【发布时间】：2019-07-30 20:39:26
【问题描述】：

好的，所以我知道这个主题有很多问题，但我仍然无法准确地弄清楚如何完成这项工作。 This 接近问题所在，但对我不起作用。

我希望我的页面有 100% 的高度。此页面内部是一个高度为 40 像素的静态标题，然后是采用剩余高度（100% - 40 像素）的内容。

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的内容和header重叠所以我加了padding-top: 40px
现在#content再次超出了页面边界

有什么建议吗？谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

这应该可行：

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

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

【讨论】：

这个可行，但是当数据超出页面并且有滚动条时可以做什么？
您可以将overflow:auto添加到#content

【解决方案2】：

您可以为此使用box-sizing 属性

检查这个：

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

另一个简单且最佳的解决方案

检查一下：

http://jsfiddle.net/B8J2H/

【讨论】：

请在帖子中包含答案，以防外部网站出现故障

【解决方案3】：

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

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

【讨论】：

我不相信该示例中的内容 div 实际上被拉伸以使用剩余空间。相反，我相信它是 Header -> Content -> Remaining Space -> Footer

【解决方案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>

【讨论】：

【解决方案5】：

只需编写脚本：

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

【讨论】：