如何使div占据剩余高度?


68

我有这个问题,我有两个股利:

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

如何使div2占据页面的剩余高度?


2
是否应该有垂直滚动条?当里面的内容#div2比窗口高时,会发生什么?
2011年

1
使用设置为height = 100%的表格。使用2行而不是2个div
Johnny Craig

2
有更简单的解决方案时不要使用表。
亚历山大·拉弗蒂

Answers:


56

使用绝对定位:

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


21

您可以使用此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>

它可与您想要的孩子数量一起使用,不需要额外的标记。


13
这很好,但是如果您将#container.height:400px更改为#container.height = 100%,将无法再使用。有没有办法使容器填充到可用高度?
Martin Meeser 2014年

2
谢谢,这正是我所需要的。达到这种高度可变的唯一方法是使用表格或JavaScript,这有点荒谬。他们说唱不好,但是桌子做得很多。
加文

3
@Gavin a divwithdisplay: table不是一张桌子。
Herman 2015年

2
@herman的行为与表相同。说唱的表的行为很糟糕,而不是被命名为“表”。
加文

4
据我所知,@ Gavin是这样的事实,即<table>不应将类似的语义元素用于布局目的。 display: table提供了一种在不暗示相同语义的情况下获得相似行为的方式。
Herman 2015年


7

由于您知道先前内容占用了多少像素,因此可以使用以下calc()功能:

height: calc(100% - 50px);

2
@kalu只有Opera Mini,IE8和旧版的Android浏览器(4.3)无法正常工作。没人关心IE8和Android 4.3的市场份额微不足道。Opera Mini拥有更多的市场份额,但似乎缺乏对许多现代事物的支持。您可以在后面的一行中以百分比的形式指定后备高度,该高度会在支持calc的浏览器中被覆盖。
赫尔曼

5

使用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>

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


身高100%不能使身高100%
尼克·曼宁2014年

3
您的html,body也需要为height:100%
Brendan



1

我尝试使用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>


1

您可以使用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>


0
<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;
}

2
请为您的答案添加一些解释。
Alex.K.

@AlexKM对不起,我的英语不好。#content将占据外部div的剩余高度。
wmzy 2015年

0

为什么不使用带有负边距的填充?像这样:

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

接着

.parent {
  padding-top: 1em;
}
.child1 {
  margin-top: -1em;
  height: 1em;
}
.child2 {
  margin-top: 0;
  height: 100%;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.