Question

我有一个固定高度和背景颜色的div - 你可以想象背景颜色不会扩展以填充div的整个高度。

我在此容器div中还有4个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

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

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

获取背景颜色以填充div的完整高度

3 个答案: