html - que - Forzar div al 100% de la altura del div padre sin especificar la altura del padre
hacer que el body ocupe toda la pantalla (24)
Tengo un sitio con la siguiente estructura:
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
La navigation está a la izquierda y el content div está a la derecha. La información para la div content se obtiene a través de PHP, por lo que es diferente cada vez.
¿Cómo escalar la navigation verticalmente para que su altura sea la misma que la altura del div contenido, sin importar qué página se cargue?
Este truco funciona: agregar un elemento final en su sección de HTML con un estilo claro: ambos;
<div style="clear:both;"></div>Todo lo anterior será incluido en la altura.
Añadir display: grid al padre
Basado en el método descrito en este artículo , he creado la solución dinámica .Less:
HTML:
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
Menos:
/* Changes these variables to adjust your columns */
@col1Width: 60%;
@col2Width: 1%;
@padding: 0%;
/* Misc variable. Do not change */
@col3Width: 100% - @col1Width - @col2Width;
#container3 {
float: left;
width: 100%;
overflow: hidden;
background-color: red;
position: relative;
#container2 {
float: left;
width: 100%;
position: relative;
background-color: yellow;
right: @col3Width;
#container1 {
float: left;
width: 100%;
position: relative;
right: @col2Width;
background-color: green;
#col1 {
float: left;
width: @col1Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding;
overflow: hidden;
}
.col2 {
float: left;
width: @col2Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 2;
overflow: hidden;
}
#col3 {
float: left;
width: @col3Width - @padding * 2;
position: relative;
left: 100% - @col1Width + @padding + @padding * 4;
overflow: hidden;
}
}
}
}
Como se mostró anteriormente, flexbox es el más fácil. p.ej.
#main{ display: flex; align-items:center;}
esto alineará todos los elementos secundarios al centro dentro del elemento padre.
Después de una larga búsqueda e intento, nada resolvió mi problema, excepto
style = "height:100%;"
en el div niños
y para los padres aplicar esto
.parent {
display: flex;
flex-direction: column;
}
también, estoy usando bootstrap y esto no corrompe la respuesta para mí.
En un proyecto de RWD, lo mejor sería usar jQuery. Para una pantalla pequeña probablemente querrá mantener la altura automática ya que las columnas col1, col2 y col3 se apilan unas sobre otras.
Sin embargo, después de un punto de interrupción de la consulta de medios, desearía que las columnas aparezcan una al lado de la otra con la misma altura.
1125 px es solo un ejemplo de punto de interrupción del ancho de la ventana tras el cual querría que todas las columnas se configuren a la misma altura.
<div class="wraper">
<div class="col1">Lorem ipsum dolor sit amet.</div>
<div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div>
<div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div>
</div>
Por supuesto, podría establecer más puntos de interrupción si lo necesita.
<script>
$(document).ready(function(){
$(window).on(''load resize'', function() {
if (window.innerWidth>= 1125) {
$(''.col1'').height($(''.wraper'').height());
$(''.col2'').height($(''.wraper'').height());
$(''.col3'').height($(''.wraper'').height());
}
if (window.innerWidth < 1125) {
$(''.col1'').height(''auto'');
$(''.col2'').height(''auto'');
$(''.col3'').height(''auto'');
}
});
});
</script>
Encuentro que configurar las dos columnas para display: table-cell; en lugar de float: left; funciona bien.
Este es un problema frustrante que se trata con los diseñadores todo el tiempo. El truco es que necesitas establecer la altura al 100% en BODY y HTML en tu CSS.
html,body {
height:100%;
}
Este código aparentemente inútil es definir en el navegador lo que significa 100%. Frustrante, sí, pero es la forma más sencilla.
Hay un poco de contradicción en el título de la pregunta y el contenido. El título habla de un div padre, pero la pregunta hace que parezca que quieres que dos divs hermanos (navegación y contenido) tengan la misma altura.
¿(A) quiere que tanto la navegación como el contenido tengan el 100% de la altura de main, o (b) desea que la navegación y el contenido tengan la misma altura?
Asumiré (b) ... si eso es así, no creo que pueda hacerlo dada la estructura actual de su página (al menos, no con CSS puro y sin scripting). Probablemente necesitarías hacer algo como:
<main div>
<content div>
<navigation div></div>
</div>
</div>
y configura la división de contenido para que tenga un margen izquierdo del ancho del panel de navegación. De esa manera, el contenido del contenido se encuentra a la derecha de la navegación y usted puede configurar la división de navegación para que sea el 100% de la altura del contenido.
EDITAR: Estoy haciendo esto completamente en mi cabeza, pero probablemente también necesitaría establecer el margen izquierdo del div de navegación en un valor negativo o establecer su izquierda absoluta en 0 para empujarlo de nuevo al extremo izquierdo. El problema es que hay muchas formas de lograrlo, pero no todas serán compatibles con todos los navegadores.
Intenta hacer el margen inferior 100%.
margin-bottom: 100%;
La forma más fácil de hacer esto es simplemente falsificarlo. A List Apart ha cubierto esto ampliamente a lo largo de los años, faux-columns .
Así es como normalmente lo hago:
<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
<div id="navigation" style="float:left;width:190px;padding-right:10px;">
<!-- Navigation -->
</div>
<div id="content" style="float:left;width:750px;">
<!-- Content -->
</div>
</div>
Puede agregar fácilmente un encabezado a este diseño envolviendo #contenedor en otro div, incrustando el div de encabezado como hermano del # contenedor, y moviendo los estilos de margen y ancho al contenedor principal. Además, el CSS se debe mover a un archivo separado y no se debe mantener en línea, etc. Finalmente, la clase clearfix se puede encontrar en la positioniseverything .
Mi solución:
$(window).resize(function() {
$(''#div_to_occupy_the_rest'').height(
$(window).height() - $(''#div_to_occupy_the_rest'').offset().top
);
});
Para el padre:
display: flex;
Debe agregar algunos prefijos, http://css-tricks.com/using-flexbox/ .
Edición: Como anotó @Adam Garner, alinear elementos: estirar; no es necesario. Su uso es también para padres, no para niños. Si quieres definir el estiramiento de niños, usas align-self.
.parent {
height: 150px;
background: red;
padding: 10px;
display:flex;
}
.child {
width: 100px;
background: blue;
}
<div class="parent">
<div class="child"></div>
</div>
Sé que ha pasado mucho tiempo desde que se hizo la pregunta, pero encontré una solución fácil y pensé que alguien podría usarla (perdón por el inglés deficiente). Aquí va:
CSS
.main, .sidebar {
float: none;
padding: 20px;
vertical-align: top;
}
.container {
display: table;
}
.main {
width: 400px;
background-color: LightSlateGrey;
display: table-cell;
}
.sidebar {
width: 200px;
display: table-cell;
background-color: Tomato;
}
HTML
<div class="container clearfix">
<div class="sidebar">
simple text here
</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.
</div>
</div>
Ejemplo simple. Tenga en cuenta que puede convertirse en capacidad de respuesta.
Si no te importa que el div de navegación se recorte en el caso de un div de contenido inesperadamente corto, hay al menos una forma fácil:
#main {
position: relative;
}
#main #navigation {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 10em; /* or whatever */
}
#main #content {
margin: 0;
margin-left: 10em; /* or whatever width you set for #navigation */
}
De otro modo, está la técnica de las faux-columns .
Utiliza CSS Flexbox
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>
[Refiriéndose al código Less de Dmity en otra respuesta] ¿Supongo que esto es algún tipo de "pseudo-código"?
Por lo que entiendo, intente usar la técnica de columnas falsas que debería hacer el truco.
Espero que esto ayude :)
usando jQuery:
$(function() {
function unifyHeights() {
var maxHeight = 0;
$(''#container'').children(''#navigation, #content'').each(function() {
var height = $(this).outerHeight();
// alert(height);
if ( height > maxHeight ) {
maxHeight = height;
}
});
$(''#navigation, #content'').css(''height'', maxHeight);
}
unifyHeights();
});
height : <percent> solo funcionará si tiene todos los nodos principales con un porcentaje de altura específico con una altura fija en píxeles, ems, etc. en el nivel superior. De esa manera, la altura caerá en cascada hacia tu elemento.
Puede especificar el 100% de los elementos html y del cuerpo como se indicó anteriormente en @Travis para que la altura de la página caiga en cascada a sus nodos.
position: absolute; dar position: absolute; Al niño trabajé en mi caso.
NOTA : Esta respuesta se aplica a los navegadores heredados sin soporte para el estándar Flexbox. Para un enfoque moderno, consulte: https://.com/a/23300532/1155721
Le sugiero que eche un vistazo a Columnas de igual altura con CSS de navegador cruzado y No Hacks .
Básicamente, hacer esto con CSS de una manera compatible con el navegador no es trivial (sino trivial con las tablas), así que encuentre la solución preempaquetada adecuada.
Además, la respuesta varía si desea una altura del 100% o una altura igual. Por lo general, es la misma altura. Si es 100% de altura, la respuesta es ligeramente diferente.
#main {
overflow: hidden;
}
#navigation, #content {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
#main {
display: table;
}
#navigation, #content {
display: table-cell;
}
Mira este ejemplo .
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Desde:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
indica bootstrap pero no necesita bootstrap para usar esto. Responder a esta vieja pregunta, ya que esto me funcionó, y parece bastante fácil de implementar.
Esta fue la misma respuesta que proporcioné a esta Question