100% div height

Hie Everyone100% div height

Estoy diseñando una página web con un diseño fluido. Quiero mantener un ancho del 100% y una altura del 100%. El problema es que no sé cómo mantener divs "izquierda" y "derecha" con una altura del 100% dentro de su div principal, "envoltorio".

<div id="container" style="width:100%; height:100%"> 
    <div id="header" style="width:100%; height:100px"> 
    </div> 

    <div id="wrapper" style="width:100%; height:(100% - 100px)"> 
      <div id="left" style="width:250px; height:(100% - 100px)"> 
      </div> 

      <div id="right" style="width:(100% - 250px); height:(100% - 100px)"> 
      </div>   
    </div>   
</div>

Por favor ayuda.

Respuesta de doctype.com

CSS

html, body{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

HTML

<body> 
<div id="container" style="width:100%; height:100%; position: absolute;"> 
    <div id="header" style="width:100%; height:100px;"> 
header 
    </div> 
    <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;"> 
    <div id="left" style="width:250px; height:100%; float:left;"> 
    left 
    </div> 
    <div id="right" style="width: 250px; height:100%; float:right; "> 
    right 
    </div>   
    main content 
    </div>   
</div> 
</body>

Fuente

2010-01-25 Q_Mlilo

Es posible que tenga una mejor oportunidad de respuesta si lo solicitó en el sitio afiliado doctype.com – Spoike

Si estoy entendiendo correctamente, quieres flotar divs derecha e izquierda dentro de su envoltorio div, pero conservando toda su altura del div contenedor en la pantalla?

Si es así, la div derecha e izquierda, por supuesto, entran dentro del contenedor y usted usa {... float: left; position: relative;} y {... float: right; position: relative;} para flotarlos a los lados.

Ahora, debido a que ha flotado estos dos divs que son parte del contenido de su envoltorio div, el envoltorio mismo puede tener altura cero. Esto es porque los dos divs dentro "flotan fuera de él".Para darle a su envoltura de la misma altura que los dos divs dentro tienen, puede:

poner esto como una tercera div dentro de su envoltorio: <div style="clear: both;"></div> O
poner cualquier elemento dentro de su envoltorio después de que los dos divs (como un palmo) y darle una propiedad CSS de ... {clear: both;}

ahora que ha "limpiado" los flotadores y su envoltura tiene toda la altura de los dos divs dentro.

SI POR OTRO LADO, quieres que todo tu contenido se extienda a toda la altura de la pantalla siempre sin importar lo que hayas puesto ahí, tendrás que hacer algo de magia de CSS y se vuelve demasiado complicado para explicar sin ver tu código. Comience aquí: http://ryanfait.com/sticky-footer/

Espero que ayude.

Fuente

2010-01-25 09:29:44 Tom

gracias por el enlace, ¡muy útil! – Lucius

@Lucius: de nada ... lo he usado durante mucho tiempo, nunca he tenido problemas. – Tom

try añadiendo

min-height: 100%; a su CSS, chk out this ejemplo

Fuente

2010-01-25 08:23:01 ant

'min-height' no es bien compatible con todos los navegadores – poke

Bueno, le di ejemplo .. él puede ver todo allí cómo hacerlo lograr su objetivo, él causa altura en cambio ... obtendrá los mismos resultados – ant

@poke: ¿Se sigue suponiendo que IE6 es relevante a menos que se especifique lo contrario? – Anonymous

Para tener un div con una altura del 100% del navegador, el padre también necesita tener una altura del 100%. Trate de añadir el siguiente CSS:

html, body { height: 100%; margin: 0; padding: 0; }

Fuente

2010-01-25 08:23:41 poke

Ya tengo ese código. mi div principal ("contenedor") está bien, tiene 100% de altura. Mi encabezado tiene una altura de 100 px; quiero que div "wrapper" y sus hijos ("left" y "right") quepan en la vista de pantalla restante. –

Si hacen todos los elementos en el mismo nivel sean 100% anchura y altura que obtendrá un comportamiento inesperado entre los navegadores. Con el ejemplo que ha dado, intenta dar a header y wrapper todo el espacio dentro del elemento principal.

100% container 
+----------------------------+ 
| 100% header 100% wrapper | 
| +----------+ +-----------+ | 
| |   errr...?  | | 
| +----------+ +-----------+ | 
+----------------------------+

¿Cómo se supone que es posible realmente? Hay varias maneras de hacer esto ya sea:

el primer elemento recibe todo el espacio o,
ambos tienen que solaparse o,
que ambos comparten el espacio

por lo que necesita ser más específico al dar porcentajes.

Por cierto has necesitado float ing sus elementos?

position: relative; // or absolute 
float: left;

Fuente

2010-01-25 08:28:36 Spoike

He editado para darle un poco de lógica a lo que quiero lograr. –

Respuesta

Cuestiones relacionadas