Geek Answers Handbook

Get background color to fill full height div

I have a div that has a fixed height and background color - since you can imagine that the background color does not expand to fill the entire height of the div.

I also have 4 divinside this container div for rounded corners. I have included the code below. How to get background color to expand to bottom of div container regardless of content?

    #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>
Run code
+5
source share
3 answers

Your problem is not background-colorone that will completely fill the entire area, but the fact that the surrounding DIV does not stretch to the full size of all DIVs inside it.

Raveren div, float: right float: left. position:absolute. .

+4

- :

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

+2

Use position:absolutefor parent div. This solved the problem for me.

You can also contact fooobar.com/questions/1038912 / ...

+1
source

More articles:


All Articles