Question

我可以使用一种方法将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>

Answer 1

您还记得在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>

Answer 2

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

相关引用：

通过分配属性和值来完成大多数尝试：   div {height：100％} - 仅此一点不起作用。原因是没有父母定义   高度，div {height：100％;}没有任何因素可以占100％，并默认为a   div的值{height：auto;} - auto是“as needed value”，由实际值控制   内容，以便div {height：100％}将a =仅扩展到内容需求。

通过为父容器分配高度值找到问题的解决方案，   在这种情况下，身体元素。写你的身体stlye包括高度100％供应   所需的价值。
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

Answer 3

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

Answer 4

如果将html和body的高度都设置为100％会使您的一切变得比我更混乱，则以下内容对我有用：

height: calc(100vh - 33rem)

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

Answer 5

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

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

#fullHeight{

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

}

为div延长全高

5 个答案: