固定高度div顶部的可变高度div
固定高度div顶部的可变高度div
提问于 2014-08-05 13:51:51
如果可能的话，我希望只使用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/
这里的问题是，如果视区不够大，不能容纳所有内容，滚动条就会出现在整个主体上，而不是div1本身。
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-08-05 13:54:44
使用问题中的代码，您可以使用下面的CSS。
通过使用calc计算内容div的max-height，您可以实现所追求的行为。
演示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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25140523
复制相关文章
相似问题
腾讯云开发者
