如何拉伸div高度以填充父div - CSS [英] How to stretch div height to fill parent div - CSS
本文介绍了如何拉伸div高度以填充父div - CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个有如下div的页面
I have a page with divs like below
<div id="container">
<div id="A">
</div>
<div id="B">
<div id="B1"></div>
<div id="B2">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.这里是工作小提琴 演示 (已更新)。如何解决这个问题
I want to adjust the height of div B2
to fill (or stretch to) entire div B
(marked with a green border) and don't want to cross footer div D. Here is a working fiddle demo(updated). How can I solve this??
推荐答案
只需添加 height:100%;
到#B2
样式。 min-height
不必要。
Simply add height: 100%;
onto the #B2
styling. min-height
shouldn't be necessary.
这篇关于如何拉伸div高度以填充父div - CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文