如何使 div 占据剩余的高度？

Question

我有一个问题，我有两个div：

<div style="width:100%; height:50px;" id="div1"></div>
<div style="width:100%;" id="div2"></div>

如何让 div2 占据页面的剩余高度？

- user666491

---

是否应该有垂直滚动条？当#div2内部内容比窗口更高时会发生什么？ - thirtydot

使用一个高度为100%的表格，而不是两个 div。使用 2 行。 - Johnny Craig

当有更简单的解决方案时，请不要使用表格。 - Alexander Rafferty

Answer 1

使用绝对定位：

#div1{
    width: 100%;
    height: 50px;
    background-color:red;/*Development Only*/
}
#div2{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color:blue;/*Development Only*/
}

<div id="div1"></div>
<div id="div2"></div>

- Alexander Rafferty

Answer 2

您可以使用此http://jsfiddle.net/Victornpb/S8g4E/783/

#container {
    display: table;
    width: 400px;
    height: 400px;
}
#container > div{
    display: table-row;
    height: 0;
}
#container > div.fill{
    height: auto;
}

只需将类.fill应用于任何子元素，即可使其占用剩余的高度。

<div id="container">
    <div>
        Lorem ipsum
    </div>
    <div>
        Lorem ipsum
    </div>
    <div class="fill">   <!-- this will fill the remaining height-->
        Lorem ipsum
    </div>
</div>

它适用于您想要的任何孩子，无需额外标记。

- Vitim.us

---

如果你把 #container.height: 400px 改成 #container.height = 100%，那么这段代码将无法正常工作。有没有一种方法让容器填满可用的高度？ - Martin Meeser

谢谢，这正是我所需要的。使用表格或JavaScript是实现具有可变高度的唯一方法有点荒谬。尽管它们声名不佳，但表格确实做了很多正确的事情。 - Gavin

@Gavin，具有"display: table"属性的"div"元素并不是表格。 - herman

@herman 它的行为与表格相同。是表格的行为让它声名狼藉，而不是它被命名为“表格”。 - Gavin

据我所知，语义元素如<table>不应用于布局。display: table提供了一种类似的行为方式，而不涉及相同的语义。 - herman

Answer 3

演示

一种方法是将div设置为position:absolute，并将其顶部设为50像素，底部设为0像素；

#div2
{
    position:absolute;
    bottom:0px;
    top:50px
}

- Joseph Marikle

---

如果有其他高度不固定的元素会怎样？ - Mark

@Mark：说得好。如果前面的元素高度是动态或未知的，那么这个解决方案就不适用了。在这种情况下，我认为唯一的解决方案就是使用JavaScript。例如像这里：https://dev59.com/yUvSa4cB1Zd3GeqPcTHY - Jules Colle

Answer 4

既然你知道前面的内容占据了多少像素，那么你可以使用calc()函数：

height: calc(100% - 50px);

- herman

---

@kalu 只有 Opera Mini、IE8 和旧版的 Android 浏览器（4.3）无法使用。没有人关心 IE8，而 Android 4.3 的市场份额微不足道。Opera Mini 的市场份额更高，但似乎缺乏对许多现代功能的支持。您可以在前一行上指定回退高度为百分比，在支持 calc 的浏览器中将被覆盖。 - herman

Answer 5

我自己也面临同样的挑战，使用 flex 属性找到了以下这两个答案。

CSS

.container {
  display: flex;
  flex-direction: column;
}

.dynamic-element{
  flex: 1;
}

• https://dev59.com/RlsW5IYBdhLWcg3wI0VH#35348188
• https://dev59.com/RlsW5IYBdhLWcg3wI0VH#35348188

- Muhammad Omar ElShourbagy

---

这确实是唯一的解决方案，不需要固定顶部位置，这意味着上部分可以在高度上变化。 - Garr Godfrey

Answer 6

您可以使用

display: flex;

如@Ayan所提到的，CSS属性是指控制网页样式的一种方法。下面我为大家提供一个可行的示例：https://jsfiddle.net/d2kjxd51/

- Cezary Tomczyk

---

请注意浏览器支持：http://caniuse.com/#search=flex（特别是如果您希望解决方案在IE上工作）。 - Gyum Fox

Answer 7

使用CSS表格，您可以在两个div周围包装一个div，并使用此css/html结构：

<style type="text/css">
.container { display:table; width:100%; height:100%;  }
#div1 { display:table-row; height:50px; background-color:red; }
#div2 { display:table-row; background-color:blue; }
</style>

<div class="container">
    <div id="div1"></div>
    <div id="div2"></div>
</div>

取决于哪些浏览器支持这些显示类型，不过我认为IE8及以下版本不支持。编辑：撤回-- IE8支持CSS表格。

- Brendan

---

高度为100％并不能使高度达到100％。 - Nick Manning

您的html和body标签也需要设置高度为100%。 - Brendan

Answer 8

我尝试使用CSS，你需要使用display: table或者使用目前大多数浏览器还不支持的新CSS（2016年）。

因此，我编写了一个jQuery插件来为我们完成这个任务，很高兴与您分享：

 
//Credit Efy Teicher
$(document).ready(function () {
            $(".fillHight").fillHeight();
            $(".fillWidth").fillWidth();
        });

        window.onresize = function (event) {
            $(".fillHight").fillHeight();
            $(".fillWidth").fillWidth();
        }

        $.fn.fillHeight = function () {
            var siblingsHeight = 0;
            this.siblings("div").each(function () {
                siblingsHeight = siblingsHeight + $(this).height();
            });

            var height = this.parent().height() - siblingsHeight;
            this.height(height);
        };

 
        $.fn.fillWidth = function (){
            var siblingsWidth = 0;
            this.siblings("div").each(function () {
                siblingsWidth  += $(this).width();
            });

            var width =this.parent().width() - siblingsWidth;
            this.width(width);
        }

      * {
            box-sizing: border-box;
        }

        html {
        }

        html, body, .fillParent {
            height: 100%;
            margin: 0;
            padding: 0;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="fillParent" style="background-color:antiquewhite">
        <div>
            no1
        </div>
        <div class="fillHight">
            no2 fill
        </div>
        <div class="deb">
            no3
        </div>
    </div>

- user1911353

Answer 9

你可以使用calc函数来计算第二个

的剩余高度。

*{
  box-sizing: border-box;
}

#div1{
  height: 50px;
  background: skyblue;
}

#div2{
  height: calc(100vh - 50px);
  background: blue;
}

<div id="div1"></div>
<div id="div2"></div>

- Abhishek Tewari

Answer 10

<div>
  <div id="header">header</div>
  <div id="content">content</div>
  <div id="footer">footer</div>
</div>

#header {
  height: 200px;
}

#content {
  height: 100%;
  margin-bottom: -200px;
  padding-bottom: 200px;
  margin-top: -200px;
  padding-top: 200px;
}

#footer {
  height: 200px;
}

- wmzy

---

请将以下与编程相关的内容从英语翻译成中文。只返回翻译后的文本：请在您的答案中添加一些解释。 - Alex Kulinkovich

@AlexKM，抱歉我的英语不好。#content将占据外部div的剩余高度。 - wmzy