css - que - ¿Cómo hacer un div flotado 100% a la altura de su padre?

hacer que un div se adapte al contenido

Question

Aquí está el HTML:

<div id="outer">
<div id="inner"></div>
Test
</div>

Y aquí está el CSS:

#inner {
float: left;
height: 100%;
}

Tras la inspección con las herramientas de desarrollo de Chrome, la división interna está obteniendo una altura de 0px.

¿Cómo puedo forzar que sea el 100% de la altura del div padre?

Answer 1

Aquí es una forma más sencilla de lograr eso:

1. Establezca la visualización del contenedor de los tres elementos (#outer): tabla
2. Y configura los propios elementos (#inner) display: table-cell
3. Eliminar el flotante.
4. Éxito.

#outer{
display: table;
}
#inner {
display: table-cell;
float: none;
}

Gracias a @Itay en Floated div, 100% de altura.

Answer 2

En realidad, siempre que el elemento padre esté posicionado, puede establecer la altura del niño al 100%. A saber, en caso de que no quiera que el padre esté en una posición absoluta. Déjame explicarte más:

<style>
#outer2 {
padding-left: 23px;
position: relative;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2 {
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id=''outer2''>
<div id=''inner2''>
</div>
</div>

Answer 3

Este es un ejemplo de código para el sistema de cuadrícula con igual altura.

#outer{
width: 100%;
margin-top: 1rem;
display: flex;
height:auto;
}

Arriba está el CSS para div exterior

#inner{
width: 20%;
float: left;
border: 1px solid;
}

Arriba está el div interior

Espero que esto te ayude

Answer 4

Esto me ayudó.

#outer {
position:relative;
}
#inner {
position:absolute;
top:0;
left:0px;
right:0px;
height:100%;
}

Cambiar a la derecha: y a la izquierda: para establecer el ancho #inner preferible.

Answer 5

Hice un example resolviendo tu problema.

Tienes que hacer una envoltura, flotarla, luego colocar la posición absoluta de tu div y darle 100% de altura.

HTML

<div class="container">
<div class="left">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </div>
<div class="right-wrapper">
<div class="right">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." </div>
</div>
<div class="clear">&nbsp;</div>
</div>

CSS:

.container {
width: 100%;
position:relative;
}
.left {
width: 50%;
background-color: rgba(0, 0, 255, 0.6);
float: left;
}
.right-wrapper {
width: 48%;
float: left;
}
.right {
height: 100%;
position: absolute;
}

Explicación: El div .right está absolutamente posicionado. Eso significa que su ancho y alto, y las posiciones superior e izquierda se calcularán basándose en la primera división principal o posición relativa SOLO si las propiedades de ancho o alto se declaran explícitamente en CSS; si no se declaran explícitamente, esas propiedades se calcularán en función del contenedor principal (.right-wrapper).

Por lo tanto, la altura del 100% del DIV se calculará en función de la altura final del contenedor, y la posición final de la posición derecha se calculará en función del contenedor principal.

Answer 6

Para el padre:

display: flex;

Debe agregar algunos prefijos http://css-tricks.com/using-flexbox/

Edición: el único inconveniente es IE como de costumbre, IE9 no admite flex. http://caniuse.com/flexbox

Edición 2: como anotó @toddsby, los elementos de alineación son para padres, y su valor predeterminado en realidad es extensible . Si desea un valor diferente para child, existe la propiedad align-self.

Answer 7

Para que #outer height se base en su contenido, y tener #inner basar su altura en eso, haga que ambos elementos #inner absolutamente posicionados.

Se pueden encontrar más detalles en la especificación de la propiedad css height , pero esencialmente, #inner debe ignorar #outer height si #outer ''s height es auto , a menos que #outer esté posicionado absolutamente. Entonces, #inner height será 0, a menos que #inner esté posicionado absolutamente.

<style>
#outer {
position:absolute;
height:auto; width:200px;
border: 1px solid red;
}
#inner {
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id=''outer''>
<div id=''inner''>
</div>
text
</div>

Sin embargo ... al posicionar #inner absolutamente, se #inner una configuración float , por lo que deberá elegir un ancho para #inner explícitamente y agregar relleno en #outer para falsificar el #outer de texto que sospecho que desea. Por ejemplo, a continuación, el relleno de #outer es el ancho de #inner +3. Convenientemente (ya que el objetivo principal era obtener la altura del #inner al 100%) no es necesario envolver el texto debajo de #inner , por lo que se verá como #inner está flotando.

<style>
#outer2{
padding-left: 23px;
position:absolute;
height:auto;
width:200px;
border: 1px solid red;
}
#inner2{
left:0;
position:absolute;
height:100%;
width:20px;
border: 1px solid black;
}
</style>
<div id=''outer2''>
<div id=''inner2''>
</div>
text
</div>

Eliminé mi respuesta anterior, ya que estaba basada en demasiadas suposiciones erróneas acerca de su objetivo.

Answer 8

Si estás preparado para usar un poco de jQuery, ¡la respuesta es simple!

$(function() {
$(''.parent'').find(''.child'').css(''height'', $(''.parent'').innerHeight());
});

Esto funciona bien para hacer flotar un solo elemento a un lado con el 100% de la altura de su padre, mientras que otros elementos flotantes que normalmente se envolverían se mantienen a un lado.

Espero que esto ayude a otros fanáticos de jQuery.

Answer 9

Siempre que no necesite admitir versiones de Internet Explorer anteriores a IE8, puede usar display: table-cell para lograr esto:

HTML:

<div class="outer">
<div class="inner">
<p>Menu or Whatever</p>
</div>
<div class="inner">
<p>Page contents...</p>
</div>
</div>

CSS:

.inner {
display: table-cell;
}

Esto obligará a cada elemento con la clase .inner a ocupar la altura completa de su elemento principal.

Answer 10

Un caso similar cuando se necesitan varios elementos secundarios que tengan la misma altura se puede resolver con flexbox:

https://css-tricks.com/using-flexbox/

Ajuste de display: flex; para padres y flex: 1; Para los elementos hijos, todos tendrán la misma altura.

Answer 11

tratar

#outer{overflow: auto;}

muestre más opciones en: ¿Cómo evita que los padres de elementos flotantes se colapsen?