为div扩展全高

79

有没有一种方法可以使div扩展到最大高度？我的脚注也很粘。

这是网页：网站已删除。我要说的中间部分是白色div，中间内容具有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>

css xhtml html

— 熊
source

这是一个非常常见的问题，几乎可以肯定在其他答案中找到您的解决方案：stackoverflow.com/search?q=css+div+100或stackoverflow.com/search?q=css+div+height

— Ben

2

我已经浏览了很多，大多数人都说同样的话。我已经应用了所说的内容，但仍然没有解决。

— 熊

1

我不确定您的问题是否足够清楚。您是否正在寻找一种使“中容器”占据“停靠站”和“页脚”之间剩余空间的功能？因为那肯定不等于100％

— cesarsalazar

137

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

— 汤姆
source

我有同样的问题，但是尽管我将身高设置为100％，但它不起作用。链接如果单击投资组合，选择一个类别，然后单击缩略图，则会显示幻灯片。幻灯片放映的背景不会扩展到整个页面，尽管其高度设置为100％。

— 硝酸钠

2

我认为代码是正确的，但是问题是错误的：它应该询问您是否将body AND html标签设置为100％。因为html标记也可能以不同的方式影响输出...

— Alexis Wilke 2014年

2

莫名其妙的html 100％似乎只能捕获可见的屏幕。使用chrome devtool，当我选择“ html”元素时，它在可见页面的结尾处结束，当我向下滚动时，就好像它不再属于<html>的部分

— Nathan H

那使用vh呢？

— mfnx

38

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

相关报价：

多数尝试是通过分配属性和值来完成的：div {height：100％}-仅此一项是行不通的。原因是，没有父级定义的高度，div {height：100％;}不会有100％的因数分解，并且默认为div {height：auto;}的值-auto是“根据需要的值” ”取决于实际的内容，因此div {height：100％}只会根据内容的需要进行扩展。

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

— 布莱恩·克拉珀
source

2

嗨，所有父母的容器都有height:100%。

— 熊

2

@Shamil，所有的父母，包括html标签？那可能是你的问题。我通常会忘记html标记作为图形标记。

— 亚历克西斯·威尔克

@AlexisWilke是的，确实做到了-很少我不包含html标签

— 熊

3

包括表单标签令我惊讶的是

— 亚当

关键要素是身体和html标签的100％高度

— luismesas

8

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

— 弗兰克·拉默
source

1

这个。就我而言，我要做的只是将内部div设置为height: 100vh-不需要其他样式或标签。

— radicand

2

如果还将html和body的高度都设置为100％，这会使您的工作变得比我更麻烦，则以下对我有用：

height: calc(100vh - 33rem)

本- 33rem是我们要充分的高度，即100vh一前一后到来的元素的高度。通过减去高度，我们将确保没有溢出，并且它将始终响应（假设我们使用rem而不是px）。

— 乔哈特
source

只要确保您不要height: calc(100vh -33rem)在负号触及该值的地方进行操作，因为那将是无效的CSS。33rem也可以用像素值代替。

— Rich Finelli

1

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

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

#fullHeight{

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

}

— 迪米特里斯·克雷梅兹（Dimitris Kremezis）
source