css - ejemplos - link html

Niño dentro del padre con altura mínima: 100% no hereda la altura

Question

Encontré una manera de hacer que un contenedor div ocupe al menos la altura completa de una página, estableciendo min-height: 100%; . Sin embargo, cuando agrego un div anidado y una height: 100%; establecida height: 100%; , no se estira hasta la altura del contenedor. ¿Hay alguna forma de arreglarlo?

html, body {
height: 100%;
margin: 0;
}
#containment {
min-height: 100%;
background: pink;
}
#containment-shadow-left {
height: 100%;
background: aqua;
}

<div id="containment">
<div id="containment-shadow-left">
Hello World!
</div>
</div>

Answer 1

Además de las respuestas existentes, también hay unidades de visualización vh para usar. Fragmento simple a continuación. Por supuesto, también se puede usar junto con calc() , por ejemplo min-height: calc(100vh - 200px); cuando el encabezado y el pie de página tienen una altura de 200px .

body {
margin: 0;
}
.child {
min-height: 100vh;
background: pink;
}

<div class="parent">
<div class="child"></div>
</div>

Answer 2

Agregue height: 1px al contenedor principal. Funciona en Chrome, FF, Safari.

Answer 3

Este es un error reportado de webkit (chrome / safari), los hijos de padres con min-height no pueden heredar la propiedad height: https://bugs.webkit.org/show_bug.cgi?id=26559

Al parecer, Firefox también se ve afectado (no se puede probar en IE en este momento)

Posible solución:

• agregar posición: relativo a #containment
• agregar posición: absoluta a # contención-sombra-izquierda

El error no se muestra cuando el elemento interno tiene un posicionamiento absoluto.

Ver http://jsfiddle.net/xrebB/

Editar el 10 de abril de 2014

Como actualmente estoy trabajando en un proyecto para el cual realmente necesito contenedores para padres con min-height , y elementos secundarios que heredan la altura del contenedor, investigué un poco más.

Primero: ya no estoy tan seguro de si el comportamiento actual del navegador es un error. Las especificaciones de CSS2.1 dicen:

El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está completamente posicionado, el valor se computa a ''auto''.

Si pongo una altura mínima en mi contenedor, no estoy especificando su altura, así que mi elemento debería tener una altura auto . Y eso es exactamente lo que hace Webkit, y todos los demás navegadores.

Segundo, la solución alternativa que encontré:

Si configuro el elemento contenedor para display:table con height:inherit actúa exactamente de la misma manera que si le diera una min-height del 100%. Y, lo que es más importante, si configuro el elemento hijo para que se display:table-cell heredará perfectamente la altura del elemento contenedor, ya sea que sea 100% o más.

CSS completo:

html, body {
height: 100%;
margin: 0;
}
#container {
background: green;
display: table;
height: inherit;
width: 100%;
}
#content {
background: red;
display: table-cell;
}

El marcado:

<div id="container">
<div id="content">
<p>content</p>
</div>
</div>

Ver http://jsfiddle.net/xrebB/54/ .

Answer 4

La solución de Kushagra Gour funciona (al menos en Chrome e IE) y resuelve el problema original sin tener que usar display: table; y display: table-cell; . Ver plunker: http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Configuración min-height: 100%; height: 1px; min-height: 100%; height: 1px; en el div externo causa que su altura real sea al menos del 100%, según sea necesario. También permite que el div interno herede correctamente la altura.

Answer 5

No creo que esto sea un error con los navegadores. Todos se comportan de la misma manera, es decir, una vez que dejas de especificar las alturas explícitas, la altura mínima es básicamente un "último paso".

Parece ser exactamente como sugiere la especificación CSS 2.1: http://www.w3.org/TR/CSS2/visudet.html#the-height-property

El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está completamente posicionado, el valor se computa a ''auto''.

Por lo tanto, como el elemento primario de min-height no tiene un conjunto de propiedades explícitamente height , se establece de forma predeterminada en automático.

Hay algunas formas de evitar esto posiblemente mediante el uso de display: table-cell , o estilos más nuevos como flexbox, si eso es posible para los navegadores de su público objetivo. También puede subvertir esto en ciertas situaciones usando las propiedades top e bottom en un elemento interno absolutamente posicionado, que le da 100% de altura sin especificarlo.

Answer 6

Otra solución JS, que es fácil y se puede usar para evitar una solución no solo fácil de CSS o de marcado / piratería adicional.

function minHeight(elm, percent) {
var windowHeight = isNaN(window.innerHeight) ?
window.clientHeight : window.innerHeight;
var height = windowHeight * percent / 100;
elm.style.minHeight = height + ''px'';
}

W / jQuery:

function minHeight($elm, percent) {
var windowHeight = $(window).height();
var height = windowHeight * percent / 100;
$elm.css(''min-height'', height + ''px'');
}

Directiva angular:

myModule.directive(''minHeight'', [''$window'', function($window) {
return {
restrict: ''A'',
link: function(scope, elm, attrs) {
var windowHeight = isNaN($window.innerHeight) ?
$window.clientHeight : $window.innerHeight;
var height = windowHeight * attrs.minHeight / 100;
elm.css(''min-height'', height + ''px'');
}
};
}]);

Para ser usado así:

<div>
<!-- height auto here -->
<div min-height="100">
<!-- This guy is at least 100% of window height but grows if needed -->
</div>
</div>

Answer 7

Para googlers:

Este jquery-workaround hace que #containment obtenga una altura automáticamente (por, altura: auto), luego obtiene la altura real asignada como un valor de píxel.

<script type="text/javascript">
<!--
$(function () {
// workaround for webkit-bug http://.com/a/8468131/348841
var rz = function () {
$(''#containment'')
.css(''height'', ''auto'')
.css(''height'', $(''#containment'').height() + ''px'');
};
$(window).resize(function () {
rz();
});
rz();
})
-->
</script>

Answer 8

después de intentar por la nuestra! Chrome entiende que quiero que el elemento secundario sea 100% alto cuando configuro el valor de visualización en bloque en línea. Por cierto, establecer el flotador lo causará.

display:inline-block

actualizar

esto no está funcionando. la solución es obtener el parámetro parentnode offsetheight y usarlo en el y de la página con javascript.

<script>
SomedivElement = document.getElementById(''mydiv'');
SomedivElement.style.height = String(nvleft.parentNode.offsetHeight) + ''px'';
</script>

Answer 9

pensé que compartiría esto, ya que no lo vi en ningún lado, y es lo que usé para solucionar mi solución.

SOLUCIÓN : min-height: inherit;

Tenía un padre con una altura mínima especificada, y necesitaba un niño para que también tuviera esa altura.

.parent {
min-height: 300px;
background-color: rgba(255,255,0,0.5); //yellow
}
.child {
min-height: inherit;
background-color: rgba(0,255,0,0.5); //blue
}
p {
padding: 20px;
color: red;
font-family: sans-serif;
font-weight: bold;
text-align: center;
}

<div class="parent">
<div class="child">
<p>Yellow + Blue = Green :)</p>
</div>
</div>

De esta forma, el niño ahora actúa como la altura del 100% de la altura mínima.

Espero que algunas personas lo encuentren útil :)