获取背景颜色来填充div的全高

Question

我有一个div，它具有固定的高度和背景颜色 - 正如您可以想象的背景颜色不会扩大以填充div的整个高度。

我也有4 div s在这个容器div圆角。我已经包含下面的代码。无论内容如何，​​我都可以将背景颜色扩展到容器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>

Answer 1

你的问题是不是background-color - ，将填补整个区域就好了 - 但是周围的DIV并没有扩展到所有DIV的全部大小理解它。

如果孩子是float: right或float: left，Raveren的方法将拉伸父母的div。它不适用于position:absolute。对于那些，你将不得不给父容器一个固定的高度。

Answer 2

的线路中试一下：

  <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> 

注意<div style="clear:both"></div>

Answer 3

使用position:absolute为你的父div。 这解决了我的问题。

您也可以参考https://stackoverflow.com/a/18968401/6751430