使背景颜色填满整个div的高度

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>

- user103219

Answer 1

您的问题不在于 background-color - 它可以很好地填满整个区域 - 而是周围的DIV没有拉伸到其内部所有DIV的完整大小。

Raveren的方法将拉伸父div，如果子元素是 float:right 或 float:left。对于那些使用 position:absolute 的元素，这种方法将不起作用。对于这些元素，您需要给父容器一个固定的高度。

- Pekka

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>。这是一个用于清除浮动的标记。

- raveren

---

在这种情况下不起作用，因为它的包含元素是 position: absolute。如果元素是 float: left 或 right，那么这将是正确的方法。 - Pekka

Answer 3

使用position:absolute来设置父级div的位置。 这对我解决了问题。

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

- Subashini Ganesan