为div延长全高

Question

为div延长全高

有没有一种方法可以用于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%;
}

Run Code Online (Sandbox Code Playgroud)

所以是的,显然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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tom*_*Tom 128

您还记得在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 AND html标记设置为100%.因为某种程度上html标签也会以不同的方式影响输出...... (2认同)
不知何故 html 100% 似乎只捕获可见屏幕。使用 chrome devtool，当我选择“html”元素时，它在可见页面的末尾结束，当我向下滚动时，它就好像它不再是 <html> 的一部分 (2认同)

Answer 2

Bri*_*per 37

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

相关报价:

大多数尝试通过分配属性和值来实现:div {height:100%} - 仅此一项不起作用.原因是没有父级定义的高度,div {height:100%;}没有任何因素可以计算100%,并且默认值为div {height:auto;} - auto是"按需要的值" "这取决于实际内容,因此div {height:100%}将a =仅扩展到内容需求.

通过为父容器(在本例中为body元素)分配高度值,可以找到问题的解决方案.写下你的身体stlye包括高度100%提供所需的价值.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}
Run Code Online (Sandbox Code Playgroud)

包括表单标签令我惊讶的是 (3认同)
嗨,所有父母的容器都有'高度:100%`. (2认同)
@Shamil,所有的父母都包括html标签？这可能是你的问题.我经常忘记将html标签作为图形标签. (2认同)

Answer 3

Fra*_*mer 9

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

归档时间：	14 年，10 月前
查看次数：	247423 次
最近记录：	6 年，1 月前