如果可能，我想只使用 css 和 html 创建以下布局:
__________________________________
| ____________________________ |
| | | |
| | div1 variable height | |
| | | |
| | | |
| | | |
| | | |
| ---------------------------- |
| ____________________________ |
| | | |
| | div2 (50px height) | |
| ---------------------------- |
| |
| |
| |
| |
---------------------------------
div1 具有可变高度，应随着内容的增长而扩展，如果没有更多空间，则应出现垂直滚动条。
div2 应该始终在 div1 之下
我试过这样
HTML:
<body>
<div id="div1">div1
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content
<br>content</div>
<div id="div2">div2</div>
</body>
CSS:
#div1 {
width:100%;
overflow:auto;
background-color:green;
}
#div2 {
width:100%;
height:50px;
background-color:red;
}
实例:http://jsfiddle.net/xucqF/16/
这里的问题是，如果视口(viewport)不够大，无法容纳所有内容，滚动条会出现在整个主体而不是 div1 本身。
最佳答案
使用问题中的代码，您可以使用以下 CSS。
通过使用calc 计算内容div 的max-height，您可以实现您想要的行为。
Demo Fiddle
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#div1 {
width:100%;
overflow:auto;
background-color:green;
max-height:calc(100% - 50px);
}
#div2 {
width:100%;
height:50px;
background-color:red;
}
关于html - 固定高度 div 之上的可变高度 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25140523/