使div扩展以占用所有可用空间
这个问题在这里已经有了答案：
最简单的方法是使用flexbox。
display: flex分配给父容器。 你的情况，这是外.outer 。 .outer的flex-direction .outer为flex-direction: column 。 .outer 。 正常的行为是flexbox给它的孩子正常的宽度/高度。 但是通过将flex:1分配给.should_fill_available_space ，该元素将获得所有额外的可用空间。 什么Flexbox，就基本上说的是，我们希望计算机使用可用房间内的所有1/1 = 100％（按所有儿童的总弯曲值除以使用柔性值），以适用于.should_fill_available_space ，同时保持最小的空间的.menu宽度。 技术上flex:是一些其他属性的简写，但这对这个问题并不重要。 这里是你的JS-Fiddle：https：//jsfiddle.net/cryh53L7/
HTML
<div class="outer">
<div class="menu">
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
</div>
<div id="this" class="should_fill_available_space">
Brown color should go all the way down
</div>
</div>
CSS
div{
padding: 0px
}
html, body{
height: 100%;
padding: 0px;
margin: 0px;
}
.outer {
display: flex;
flex-direction: column;
background: olive;
height: 100%;
}
.menu{
background: orange;
}
.should_fill_available_space{
flex: 1;
background: brown;
}
尝试这个！
我使用了桌面显示器，我希望这对你是好的:)
HTML：
<div class="outer">
<div class="menu">
Lorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
Lorem Ipsum
Lorem IpsumLorem Ipsum
</div>
<div id="this" class="should_fill_available_space">
Brown color should go all the way down
</div>
CSS：
div{
padding: 0px
}
html, body{
height: 100%;
padding: 0px;
margin: 0px;
}
.outer {
background: olive;
height: 100%;
display:table;
width:100%;
}
.menu{
background: orange;
display:table-row;
}
.should_fill_available_space{
background: brown;
display:table-row;
}
div+ div{
height:100%;
}
您可以使用CSS3中的flexbox来实现此目标（https://css-tricks.com/snippets/css/a-guide-to-flexbox/）。
像这样更新你的CSS来看看它的工作原理：
.outer {
background: olive;
height: 100%;
display: flex;
flex-direction: column;
}
.should_fill_available_space{
background: brown;
flex-grow: 2;
}