Obtener color de fondo para llenar la altura completa de div

Question

Tengo un div que tiene una altura fija y un color de fondo, como se puede imaginar, el color de fondo no se expande para ocupar toda la altura del div.

También tengo 4 div s dentro de este contenedor div para esquinas redondeadas. He incluido el código a continuación. ¿Cómo hago para que el color de fondo se extienda hasta la parte inferior del contenedor div independientemente del contenido?

#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

su problema no el background-color es - pero el hecho de que el DIV circundante no se extiende al tamaño completo de todos los ins de DIV ide it.

El enfoque Raveren extenderá el div principal si los niños son float: right o float: left. No funcionará para los position:absolute. Para ellos, tendrás que darle al contenedor principal una altura fija.

Answer 2

Probar algo entre las líneas de: - que llenará toda la zona muy bien

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

nota del <div style="clear:both"></div>

Answer 3

Use position:absolute para usted padre div. Esto me solucionó el problema.

También puede hacer referencia https://stackoverflow.com/a/18968401/6751430