Question

我想创建一个<div>（此处称为div1），它将自己的高度扩展到浏览器高度的限制（即最大高度，直到它会产生溢出{{1 }}）：

scrollbar

这是css：

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

如何将div1的高度增加到最大可能高度？

这是一个现场演示：http://jsfiddle.net/XAjGM/2/。

Answer 1

这可以是你的css，这样你就可以达到预期目的。

html,body{
height:100%;
}

#div2 {
    height: 300px;
    background-color: #ccffcc;
}

#div1 {
    height: calc(100% - 300px); //where 300px is the height of div2
   background-color: #cc00cc;
}

Answer 2

您应该使用包装元素并在其上使用display:table并在display:table-row和.div1元素上使用.div2

<强> CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;
}
.div1 {
    display: table-row;
    background: #cc00cc;
    height: 100%;
}
.div2 {
    display: table-row;
    background: #ccffcc;
}

<强> HTML

<div class="wrapper">
    <div class="div1">
        contents of div 1
    </div>
    <div class="div2">
        contents of div 2
    </div>
</div>

http://jsfiddle.net/gaby/55z22/

演示

当您向.div2添加内容时，.div1将缩小

Answer 3

试试这个1： -

body, html {
    height: 100%;    
}

#div1 {
   height: 80px;
   background-color: #ccffcc;
}

#div2 {
   height: 100%;
   background-color: #cc00cc;
    overflow: auto;
}

FIDDLE

可以增加/减少自身高度的<div> </div>

3 个答案: