1. Inicio
  2. Pregunta y respuesta
  3. make div span verticalmente toda la altura disponible

make div span verticalmente toda la altura disponible

2012-01-05 11 views

Respuesta

5

Usted debe tener un div que contiene ambos elementos y es clearfixed

<div class="wrapper clearfix"> 
    <div class="red"></div> 
    <div class="green"></div> 
</div>

A continuación, agrega posición relativa a la envoltura:

.wrapper { 
    /* remember this is clearfixed */ 
    position: relative; 
}

deja que el recipiente del flotador verde a la derecha:

.green { 
    float: right; 
    width: 50%; 
}

Entonces posición absoluta del rojo y hacerle saber que se debe utilizar todo el espacio de la envoltura:

.red { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    top: 0; 
    bottom: 0; 
}

Tenga en cuenta que este caso sólo funcionará cuando el contenedor verde es más grande que el de la izquierda.

Fuente

2012-01-05 09:35:20 Duopixel

0

Eso es problemático, porque para hacer alturas iguales, debe agregar div entre documento y div rojo y verde, este div debe tener altura definida, para que pueda establecer alturas para ambos div-s en el 100%, por ejemplo.

<div style="height: [must be defined]"> 
    <div id="red" style="height: 100%; ..."> ... </div> 
    <div id="green" style="height: 100%; ..."> ... </div> 
</div> 
<div id="black" style="height: 100%; ..."> ... </div>

PERO - esto se romperá, cuando uno de los divs será más alta que la otra - fijarlo mediante el uso de desbordamiento

PS. Para algunos casos es bueno utilizar tablas aquí, ya que las células de la tabla tienen siempre la misma altura

Fuente

2012-01-05 09:33:37 SergeS

0

Puede usar una tabla como envoltorio. El primero y el último tr son opcionales. Pero si necesita el primer o el último tr, configure una altura. el navegador necesita esto para calcular la altura correcta para el medio tr.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
    html, body {height:100%; padding:0; margin:0;} 
    #wrapper {height:100%;width:100%;border-collapse:collapse;} 
    #wrapper td {vertical-align:top;} 
    #wrapperFirst, #wrapperLast {height:1px;} 
</style> 
<body> 
    <table id="wrapper"> 
     <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr> 
     <tr><td style="background-color: #ffff44;">text</td></tr> 
     <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr> 
    </table> 

</body> 
</html>

Fuente

2013-06-12 08:41:55 Uwe

Cuestiones relacionadas

 Cuestiones relacionadas