Html 如何让div占据剩余高度？

How to make div occupy remaining height?

提问by

I have this problem, I have two divs:

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

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

How do I make div2 occupy remaining height of the page?

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

采纳答案by Alexander Rafferty

Use absolute positioning:

使用绝对定位：

#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>

回答by Vitim.us

You can use this http://jsfiddle.net/Victornpb/S8g4E/783/

你可以使用这个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;
}

Just apply the class .fillto any of the children to make then occupy the remaining height.

只需将类.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>

It works with how many children you want, no additional markup is required.

它适用于您想要多少个孩子，不需要额外的标记。

回答by Joseph Marikle

Demo

演示

One way is to set the the div to position:absoluteand give it a top of 50px and bottom of 0px;

一种方法是将 div 设置position:absolute为 50px 的顶部和 0px 的底部；

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

回答by herman

Since you know how many pixels are occupied by the previous content, you can use the calc()function:

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

height: calc(100% - 50px);

回答by Brendan

With CSS tables, you could wrap a div around the two you have there and use this css/html structure:

使用 CSS 表格，您可以将 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>

Depends on what browsers support these display types, however. I don't think IE8 and below do. EDIT: Scratch that-- IE8 does support CSS tables.

但是，这取决于哪些浏览器支持这些显示类型。我不认为 IE8 及以下版本。编辑：从头开始——IE8 确实支持 CSS 表。

回答by Cezary Tomczyk

You can use

您可以使用

display: flex;

CSS property, as mentioned before by @Ayan, but I've created a working example: https://jsfiddle.net/d2kjxd51/

CSS 属性，正如@Ayan 之前提到的，但我已经创建了一个工作示例：https://jsfiddle.net/d2kjxd51/

回答by Muhammad Omar ElShourbagy

I faced the same challenge myself and found these 2 answers using flexproperties.

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

CSS

CSS

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

.dynamic-element{
  flex: 1;
}

• https://stackoverflow.com/a/35348188/1084619
• https://stackoverflow.com/a/35348188/1084619

• https://stackoverflow.com/a/35348188/1084619
• https://stackoverflow.com/a/35348188/1084619

回答by user1911353

I tried with CSS, and or you need to use display: table or you need to use new css that is not yet supported on most browsers (2016).

我尝试过使用 CSS，或者您需要使用 display: table 或者您需要使用大多数浏览器尚不支持的新 css（2016）。

So, I wrote a jquery plugin to do it for us, I am happy to share it:

所以，我写了一个 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>

回答by Abhishek Tewari

You could use calcfunction to calculate remaining height for 2nd div.

您可以使用calc函数来计算第二个 div 的剩余高度。

*{
  box-sizing: border-box;
}

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

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

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

回答by kalu

Why not use padding with negative margins? Something like this:

为什么不使用负边距的填充？像这样的东西：

<div class="parent">
  <div class="child1">
  </div>
  <div class="child2">
  </div>
</div>

And then

进而

.parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}