CSS: altura: completa el resto de div?

Question

Me pregunto si esto es posible con CSS simple o si tengo que usar Javascript para esto?

tengo una barra lateral en mi sitio web. un div # sidbar simple normalmente tiene 1024 px de alto, pero la altura cambia dinámicamente debido a su contenido.

así que vamos a imaginge el siguiente caso:

<div id="sidebar"> 
    <div class="widget"></div> //has a height of 100px 
    <div class="widget"></div> //has a height of 100px 
    <div id="rest"></div> //this div should have the rest height till to the bottom of the sidebar 
</div> 

Quiero que el div # descanso para llenar el resto de la barra lateral hasta que llega a la parte inferior de la barra lateral div #.

¿Esto es posible con pure css?

Answer 1

Lo que queremos es algo así como 100% - 200px pero CSS no admite expresiones como éstas. IE tiene una función de "expresiones" no estándar, pero si quieres que tu página funcione en todos los navegadores, no veo una manera de hacerlo sin JavaScript. Alternativamente, podría hacer todas las alturas porcentuales de uso de div, por lo que podría tener algo así como 10% -10% -80%.

Actualización: Aquí hay una solución simple usando JavaScript. Siempre que el contenido en los cambios de la barra lateral, justo llamar a esta función:

function resize() { 
    // 200 is the total height of the other 2 divs 
    var height = document.getElementById('sidebar').offsetHeight - 200; 
    document.getElementById('rest').style.height = height + 'px'; 
}; 

Answer 2

Trate

height: 100%; 

o

height: auto; 

Answer 3

Si conoce la altura exacta de #widget (100px en su caso), se puede evitar el uso de JavaScript utilizando posicionamiento absoluto:

#sidebar 
{ 
height: 100%; 
width: ...; 
position: relative; 
} 

.widget 
{ 
height: 100px; 
} 

#rest 
{ 
position: absolute; 
left: 0; 
width: 100%; 
top: 200px; 
bottom: 0; 
} 

Answer 4

puede hacer esto con etiquetas div anidadas. usted tiene uno que especifica el ancho a la izquierda, y luego otro deja en blanco. Para llenar el resto del otro lado anida un div relativo del 100% dentro del div del lado derecho. de este modo:

<div style="width:100%"> 
    <div style="width:300px;background-color:#FFFF00;float:left"> 
    </div> 
    <div style="margin-left:300px"> 
    <div style="position:relative;left:0px;width:100%;background-color:#00FFFF"> 
    </div> 
    </div> 
</div> 

Answer 5

me encontré con esta pregunta en la búsqueda de una respuesta a una pregunta similar y pensé que ilustro calc. A partir de esta publicación, calc aún no es compatible con navegador cruzado; sin embargo, puede marcar this link here para ver si sus exploradores de destino son compatibles. Modifiqué el caso hipotético de matt para usar calc en an example on jsFiddle. Esencialmente es una solución pura de CSS que hace lo que Casablanca propone en su respuesta. Por ejemplo, si un navegador es compatible con calc, entonces height: calc(100% - 200px); sería válido y también para propiedades similares.

Answer 6

propongo el elemento de la tabla como alternativa:

• +: CSS limpio
• +: evitar javascript
• -: mesa semánticamente mal uso
• -: No los Div-elementos solicitados