Divs anidados a la fuerza para tener una altura mínima de 100%?

Sé que min-height: 100% solo trabajará para tomar un mínimo del 100% de la altura de su elemento padre si el elemento padre tiene algún valor numérico para la altura, pero ¿qué ocurre si tengo algunos divs anidados y quiero que todos tengan una min-altura del 100%? Intenté min-height:inherit pero eso tampoco funcionó? Sé que probablemente pueda resolver este problema con JavaScript simplemente verificando el valor de altura del navegador en la carga del documento y luego asignándolo a la propiedad min-height de mis divs anidados, pero me gustaría saber si sería posible solucionar este problema. con solo css?Divs anidados a la fuerza para tener una altura mínima de 100%?

Edit: Debo mencionar también que necesito que mi div más externo y mis divs anidados tengan una altura mínima del 100% para que ocupen al menos la altura del navegador, pero amplíelos si es necesario .

Fuente

2012-08-11 hesson

min-height: inherit; debería funcionar: http://jsfiddle.net/ugxbs/

EDITAR

En cuanto a los valores de porcentaje y el comportamiento esperado, no hay lógica detrás de anidada min-altura. Lo que debe hacer es usar la propiedad height para todos los padres, luego agregue min-height al DIV más interno.

F.ex:

<html> 
    <body> 
     <div class="outer"> 
      <div class="inner"></div> 
     </div> 
    </body> 
</html>

CSS:

html, body, .outer { height: 100% } 
.inner { min-height: 100%; }

http://jsfiddle.net/4PsdT/

De esta manera, le está diciendo al navegador para establecer todos los elementos exteriores de la parte superior (HTML) a una altura del 100%. Esto hará que estos elementos se extiendan a lo largo de la altura del navegador. A continuación, solo agregue min-height al elemento más interno que contiene el contenido.

Al configurar height no significa que el contenido excesivo de los niños se caerá, a menos que agregue overflow:hidden;.

Fuente

2012-08-11 18:29:01 David

sé que iba a funcionar cuando el más exterior div tiene un valor numérico para min-altura, pero fallará cuando el más exterior div tiene un porcentaje de min-altura (que es lo que necesito en mi caso). Necesito que todos mis divs anidados ocupen al menos la altura de la ventana del navegador, por lo que mi Div más externo debería tener una altura mínima de 100%, a menos que haya otra manera de resolver este problema. – hesson

@hesson Consulte mi edición para intentar explicar por qué la altura mínima anidada no es un enfoque lógico del problema. – David

Perfecto, ¡eso es justo lo que necesitaba! – hesson

Lo puedo hacer funcionar con la altura de la propiedad pero no la altura mínima.

http://jsfiddle.net/zDVqm/

Fuente

2012-08-14 07:36:14 LeBen

Divs anidados a la fuerza para tener una altura mínima de 100%?

Respuesta

Cuestiones relacionadas