Ajustar automáticamente la altura del div con CSS

Digamos que hay seis divs uno en el otro.Ajustar automáticamente la altura del div con CSS

1st, 2nd and 3rd div tiene una altura fija, p. 25px, 100px y 25px. 4th div es el área de contenido y debe ser un div ajuste automático. 5th div tiene algo de contenido y la altura mínima es 100 px (la altura NO es fija). 6º div es un pie de página tiene una altura fija, p. 25px.

divs 5 y 6 deben estar siempre en la parte inferior de la página (no pegajosa)

No hay problema cuando la 4ª div (div_auto_height) tiene una gran cantidad de contenido y la página es tan largo o más largo que la pantalla

El problema ocurre cuando la página es más corta que la pantalla y el espacio vacío viene después del 6to div. Entonces, el quinto y el sexto div no están donde deberían estar.

This is the normal case

El problema se resolvería si se puede obtener la altura de la 4ª div (div_auto_height) ajusta automáticamente para llenar el espacio vacío.

This is what we need to have

que han estado tratando de resolver este problema de muchas maneras sin una solución decente.

soluciones que no trabaja:

Hay diferentes resoluciones de pantalla, por lo min-height no funciona con grandes pantallas sin hacer la página de un tiempo muy largo para pantallas panorámicas pequeñas o .
no han sido capaces de obtener superiores e inferiores propiedades de posición funcionan correctamente porque hace divs 5 y 6 que vienen en la parte superior de la 4ª div (div_auto_height)

que aquí hay una plantilla para su modificación:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head><title>No title</title> 
<style type="text/css"> 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0; 
} 

#div1 { 
    height: 25px; 
    background-color: #123456; 
} 

#div2 { 
    height: 100px; 
    background-color: #345678; 
} 

#div3 { 
    height: 25px; 
    background-color: #567890; 
} 

#div_auto_height { 
    height: auto ; 
    background-color: #789012; 
} 

#div5 { 
    min-height: 100px; 
    background-color: #9; 
} 

#div6 { 
    height: 25px; 
    background-color: #123456; 
} 

</style> 
</head> 
<body> 
    <div id="div1">Div 1</div> 
    <div id="div2">Div 2</div> 
    <div id="div3">Div 3</div> 
    <div id="div_auto_height">This div should adjust automatically</div> 
    <div id="div5">Div 5</div> 
    <div id="div6">Div 6</div> 
</body> 
</html> 
</body> 
</html>

Fuente

2012-01-09 Johnny

** ** Cita: _ "... seis divs uno por el otro" _. ¿Y eso que significa? Tal vez puedas dar una idea de lo que quieres hacer. – Sparky

¿Por qué no puedes dar una altura mínima para 'div_auto_height'? Encontré tu pregunta no lo suficientemente clara. – Sandeep

Me dirijo a resolver el problema con las tablas para que sea lo más universal posible ... – Johnny

No hay forma de CSS para dar a una propiedad el valor "altura total de la pantalla, algunos píxeles fijos". Use Javascript.

Fuente

2012-01-10 08:06:23

Esto es lo que estaba diciendo que no hay una solución pura de CSS ... – Johnny

O puede simular una tabla mediante el uso de 'display: table' etc. y dando a todo el conjunto una altura del 100%. Pero luego las seis filas ganarán la misma cantidad de relleno vertical adicional. –

Creo que deberías usar javascript para resolver este problema. Hay muchos frameworks de javascript fáciles de usar como jquery.

Lo que debe hacer:

dar un id a su divs.
usar esos identificadores de encontrar su divs - a excepción de la cuarta - y calcular su altura
obtener la altura de la ventana
ajuste la altura de la 4ta div restando la altura de la ventana de la suma de su otra altura divs

¡Y eso es todo! Dime si necesitas un código.

editar: No encontré el código pero recuerdo que utilicé jquery dimensions. ¡Puedes encontrar códigos de ejemplo allí!

Fuente

2012-01-10 08:12:58

Esto sin duda resuelve el problema. También se puede resolver fácilmente mediante el uso de tablas. Me preguntaba si existe una solución pura de CSS para hacer eso. Si ya tiene el código de javascript en sus archivos, estoy muy agradecido de haberlo recibido. ¡Gracias ya! – Johnny

esto podría no ser la solución más viable para usted, pero si usted sabe un max-height para el 5 y 6 de div, puede utilizar position: absolute y padding (establecido en el valor max-height) hasta conseguir el resultado:

<div id="wrapper"> 
    <div class="div-25"></div> 
    <div class="div-100"></div> 
    <div class="div-25"></div> 
    <div id="content"> 
     <div class="fluid"> 

     </div> 
    </div> 
</div> 
<div id="container"> 
    <div class="footer"> 
     <div class="div-25"></div> 
    </div> 
</div>

CSS:

html, body { 
    margin: 0; 
    height: 100%; } 
div { width: 100%; } 
#wrapper { min-height: 100%; } 
.div-25 { 
    background: green; 
    height: 25px; } 
.div-100 { 
    background: grey; 
    height: 50px; } 
#content { padding: 0 0 150px; } /* Max Height */ 
.fluid { 
    background: red; 
    height: 100px; } 
#container { position: relative; } 
.footer { 
    background: blue; 
    position: absolute; 
    bottom: 100%; 
    min-height: 100px; }

Vista previa: http://jsfiddle.net/Wexcode/jzdDU/

Fuente

2012-01-10 17:36:47 Wex

¡Hola! Esto puede funcionar para mí ... ¡Gracias amigo! – Johnny

Claro. Acepte esta respuesta si siente que resolvió su problema :) – Wex

Está cerca, pero todavía no está del todo ... Esta solución es bastante frágil si el contenido del 5º div alcanza cierta altura. – Johnny

cambio

#div_auto_height { 
    height: auto ; 
    background-color: #789012; 
}

#div_auto_height { 
    height: 100% ; 
    background-color: #789012; 
}

o tal vez lo que necesita esto:

#div_auto_height { 
    height: calc(100% - 275px); ; 
    background-color: #789012; 
}

Fuente

2014-05-30 02:12:54 crazyjune

Ajustar automáticamente la altura del div con CSS

Respuesta

Cuestiones relacionadas