the - CSS: altura: completar el resto de div?

styling paragraphs css

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.

entonces imaginemos 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 el div # resto para completar el resto de la barra lateral hasta que llegue al final de la barra lateral div #.

¿Es esto posible con CSS puro?

Answer 1

Lo que quiere es algo así como 100% - 200px pero CSS no admite expresiones como estas. 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, puedes hacer que todos los div usen alturas porcentuales, por lo que podrías tener algo así como 10% -10% -80%.

Actualización: Aquí hay una solución simple que usa JavaScript. Siempre que el contenido en su barra lateral cambie, simplemente llame 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

Me encontré con esta pregunta mientras buscaba una respuesta a una pregunta similar, y pensé que iba a ilustrar calc . A partir de esta publicación, calc no es compatible aún con el navegador cruzado; Sin embargo, puede consultar este enlace aquí para ver si sus navegadores objetivo son compatibles. Modifiqué el caso hipotético de matt para usar calc en un ejemplo en jsFiddle . Esencialmente es una solución pura de CSS que hace lo que Casablanca propone en su respuesta. Por ejemplo, si un navegador admite calc , entonces height: calc(100% - 200px); sería válido, así como para propiedades similares.

Answer 3

Propongo el elemento de tabla como una alternativa:

• +: limpiar CSS
• +: evitar javascript
• -: tabla semánticamente mal utilizada
• -: no los elementos div solicitados

Answer 4

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

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

.widget
{
height: 100px;
}

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

Answer 5

Tratar

height: 100%;

o

height: auto;

Answer 6

puedes 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. al igual que:

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