让 div 扩展全高答案

【问题标题】：For div to extend full height让 div 扩展全高
【发布时间】：2011-05-30 23:25:21
【问题描述】：

有没有一种方法可以让 div 扩展到全高？我也有一个粘性页脚。

这是网页：网站已删除。我说的中间部分是白色的 div，midcontent，它有 CSS 值：

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

所以是的，显然height:100% 没有用。此外，所有父容器都设置了高度。

这是一般结构

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

【问题讨论】：

这是一个非常常见的问题，您的解决方案几乎肯定会在其他答案中找到：stackoverflow.com/search?q=css+div+100 或 stackoverflow.com/search?q=css+div+height
我翻遍了，他们中的大多数人都说同样的话。我已经应用了所说的，仍然没有修复。
我不确定你的问题是否足够清楚。您是否正在寻找使“中间容器”占据“headout”和“footer”之间的全部剩余空间的东西？因为那肯定不等于 100%
stackoverflow.com/a/60403264/470749 有助于我扩展 div 以填充剩余的窗口高度。

标签： css xhtml html

【解决方案1】：

如果将 html 和正文的高度也设置为 100% 会使您的一切变得像对我一样混乱，以下对我有用：

height: calc(100vh - 33rem)

- 33rem 是在我们想要取全高之后的元素的高度，即 100vh。通过减去高度，我们将确保没有溢出并且它始终是响应式的（假设我们使用的是 rem 而不是 px）。

【讨论】：

只要确保你不做height: calc(100vh -33rem) 负号触及值的地方，因为那将是无效的CSS。 33rem 也可以替换为像素值。

【解决方案2】：

这是一个老问题。 CSS 已经进化了。现在有vh（视口高度）单元，还有flexbox 或CSS grid 等新布局选项，以更简洁的方式实现经典设计。

【讨论】：

【解决方案3】：

如果将高度设置为 100% 不起作用，请尝试为 div 设置 min-height=100%。您仍然需要设置 html 标签。

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}

【讨论】：

【解决方案4】：

这可能会有所帮助：http://www.webmasterworld.com/forum83/200.htm

相关引用：

大多数尝试都是通过分配属性和值来实现的： div{height:100%} - 仅此一项是行不通的。原因是没有定义父级高度， div{height:100%;} 没有任何因素可以考虑 100%，并且默认为 div{height:auto;} 的值 - auto 是一个“按需值”，由实际值决定内容，因此 div{height:100%} 将 a=仅扩展到内容需要的范围内。

问题的解决方法是给父容器赋值一个高度值，在这种情况下，body 元素。写你的身体风格以包括身高 100% 用品所需的值。
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

【讨论】：

嗨，所有父容器都有height:100%。
@Shamil，所有父母都包括 html 标签？那可能是你的问题。我经常忘记将 html 标记作为图形标记。
@AlexisWilke 是的，确实如此——我很少不包含 html 标签
意外地包含了表单标签
关键元素是body和html标签的100%高度

【解决方案5】：

您还记得在 CSS 中设置 html 和 body 标签的高度吗？这通常是我如何让 DIV 扩展到全高：


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

【讨论】：

我也有同样的问题，但是虽然我已经设置了body height为100%，但是还是不行。 link 如果您单击投资组合，选择一个类别，然后单击缩略图，则会出现幻灯片。幻灯片的背景不会延伸到整个页面，尽管它的高度设置为 100%。
我认为代码是正确的，但问题是错误的：它应该询问您是否将body AND html标签设置为100％。因为不知何故，html标签也会以不同的方式影响输出......
不知何故 html 100% 似乎只捕获可见屏幕。使用 chrome devtool，当我选择“html”元素时，它在可见页面的末尾结束，当我向下滚动时，它就好像它不再是的一部分
使用 vh 怎么样？