Html 获取背景颜色以填充 div 的整个高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2134352/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get background color to fill full height of div
提问by user103219
I have a div that has fixed height and a background color - as you can imagine the background color does not expand to fill the full height of the div.
我有一个具有固定高度和背景颜色的 div - 正如您可以想象的那样，背景颜色不会扩展以填充 div 的整个高度。
I also have 4 divs within this container div for rounded corners. I have included the code below. How do I get the background color to extend to the bottom of the container div regardless of content?
我div在这个容器 div 中也有 4 s 用于圆角。我已经包含了下面的代码。无论内容如何，如何让背景颜色延伸到容器 div 的底部？
#art2 {
margin-top: 15px;
margin-right: 10px;
float: right;
width: 485px;
background-color: #262626;
}
.art2boxtl {
background-image: url(../images/tlar2.png);
background-repeat: no-repeat;
height: 10px;
width: 9px;
}
.art2boxtr {
position: absolute;
right: 10px;
top: 15px;
background-image: url(../images/trar2.png);
background-repeat: no-repeat;
height: 10px;
width: 9px;
}
.art2boxbl {
position: absolute;
bottom: 0px;
background-image: url(../images/blar2.png);
background-repeat: no-repeat;
height: 11px;
width: 10px;
}
.art2boxbr {
position: absolute;
bottom: 0px;
right: 10px;
background-image: url(../images/brar2.png);
background-repeat: no-repeat;
height: 11px;
width: 10px;
}<div id="art2">
<div class="art2boxtl"></div>
<div class="art2boxtr"></div>
CONTENT
<div class="art2boxbl"></div>
<div class="art2boxbr"></div>
</div>采纳答案by Pekka
YOur problem is not the background-color- that will fill the whole area just fine - but the fact that the surrounding DIV is not stretching to the full size of all the DIVs inside it.
您的问题不在于background-color- 这将很好地填充整个区域 - 而是周围的 DIV 没有拉伸到其中所有 DIV 的全尺寸这一事实。
Raveren's approach will stretch the parent div if the childrens are float: rightor float: left. It won't work for the position:absoluteones. For those, you will have to give the parent container a fixed height.
如果孩子是float: right或 ，Raveren 的方法将拉伸父 div float: left。这对position:absolute那些人不起作用。对于那些，你必须给父容器一个固定的高度。
回答by raveren
Try something among the lines of:
尝试以下内容：
<div id="art2">
<div class="art2boxtl"></div>
<div class="art2boxtr"></div>
CONTENT
<div class="art2boxbl"></div>
<div class="art2boxbr"></div>
<div style="clear:both"></div>
</div>
note the <div style="clear:both"></div>
注意 <div style="clear:both"></div>
回答by Subashini Ganesan
Use position:absolutefor you parent div.
This solved the problem for me.
使用position:absolute你父DIV。这为我解决了这个问题。
You can also refer https://stackoverflow.com/a/18968401/6751430
