如何拉伸div高度以填充父div - CSS
如何拉伸div高度以填充父div - CSS
提问于 2011-04-07 21:23:59
我有一个包含div的页面，如下所示
<div id="container">
<div id="A"></div>
<div id="B">
<div id="B1"></div>
<div id="B2"></div>
</div>
<div id="C"></div>
<div id="D"></div>
</div>将样式设置为；
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
margin-top: -35px;
bottom: 0;
background-color: #FFFFFF;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}请看下面的布局/截图；
我想调整div B2的高度以填充(或拉伸到)整个div B (用绿色边框标记)，并且不想跨越div D的脚注。这是一个有效的(更新)。我怎么才能解决这个问题呢？
回答 7
Stack Overflow用户
回答已采纳
发布于 2011-04-07 22:12:07
只需在#B2样式中添加height: 100%;即可。min-height应该不是必需的。
Stack Overflow用户
发布于 2017-07-06 20:34:32
假设你有
<body>
<div id="root" />
</body>使用普通的CSS，您可以执行以下操作。查看有效的应用程序https://github.com/onmyway133/Lyrics/blob/master/index.html
#root {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}使用flexbox，您可以
html, body {
height: 100%
}
body {
display: flex;
align-items: stretch;
}
#root {
width: 100%
}Stack Overflow用户
发布于 2011-04-07 21:26:24
使用"min-height“属性
注意填充、页边距和边框:)
html, body {
margin: 0;
padding: 0;
border: 0;
}
#B, #C, #D {
position: absolute;
}
#A{
top: 0;
width: 100%;
height: 35px;
background-color: #99CC00;
}
#B {
top: 35px;
width: 200px;
bottom: 35px;
background-color: #999999;
z-index:100;
}
#B2 {
min-height: 100%;
height: 100%;
margin-top: -35px;
bottom: 0;
background-color: red;
width: 200px;
overflow: scroll;
}
#B1 {
height: 35px;
width: 35px;
margin-left: 200px;
background-color: #CC0066;
}
#C {
top: 35px;
left: 200px;
right: 0;
bottom: 35px;
background-color: #CCCCCC;
}
#D {
bottom: 0;
width: 100%;
height: 35px;
background-color: #3399FF;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5581799
复制相关文章
相似问题
腾讯云开发者
