Получить цвет фона, чтобы заполнить всю высоту div

Question

У меня есть 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 внутри него.

Подход Раверена растянет родительский div, если дочерние элементы равны float: right или float: left. Это не будет работать для 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