¿Cómo hacer un div flotante 100% de altura de su padre?


256

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 desarrollador de Chrome, el div interno está obteniendo una altura de 0px.

¿Cómo puedo forzarlo a que sea el 100% de la altura del div principal?


1
Entonces, ¿quieres que el texto en el div externo (no en el div interno), pero el div interno flotante sea la altura del div externo?
edl

¿Cuál es el resultado final que estás tratando de lograr? Supongo que mi confusión radica en que si el div interno es tan alto como el externo y el externo es tan alto como el texto, ¿no es lo mismo que tener el texto en el div interno?
edl

2
@edl: Sí, lo es :) La razón por la que lo quiero de esta manera es que el div interno tiene una imagen como fondo. El texto debe estar al lado. Ambos deben estar dentro del div externo ya que también tiene una imagen de fondo.
Nathan Osman


2
Ver y probar las respuestas a esta pregunta fue deprimente.
EternalHour

Respuestas:


125

Para que la #outeraltura se base en su contenido y #innerbasar su altura en eso, coloque ambos elementos en una posición absoluta.

Se pueden encontrar más detalles en la especificación de la propiedad css height , pero esencialmente, #innerdebe ignorar la #outeraltura si #outerla altura es auto, a menos que #outer esté posicionada absolutamente. Entonces la #inneraltura será 0, a menos que #inner se coloque 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 posicionarse #innerabsolutamente, floatse ignorará una configuración, por lo que deberá elegir un ancho #innerexplícitamente y agregar relleno #outerpara falsificar el ajuste de texto que sospecho que desea. Por ejemplo, a continuación, el relleno de #outeres el ancho de #inner+3. Convenientemente (ya que el objetivo principal era obtener la #inneraltura al 100%) no hay necesidad de ajustar el texto debajo #inner, por lo que se verá como #innerflotante.

<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 se basaba en demasiadas suposiciones erróneas sobre su objetivo.


118
Hmm ... la pregunta era sobre los flotadores div. Respondiste sobre absolutamente divs de posición
Mihkel L.

57
Nunca dejo de sorprenderme de lo complejo que es lograr cosas increíblemente simples en HTML/CSS:)
Yuriy Nakonechnyy

15
¿Alguna forma de hacer esto sin anchos de codificación? No es excelente para contenedores receptivos.
Jake Wilson

23
No sé por qué esto fue aceptado y votado tanto. La pregunta es sobre divs flotantes, que es lo que me trajo aquí de mi búsqueda, y en su lugar esto responde a divs posicionados absolutamente.
Matt K

2
¿Cómo hacer que un contenedor flotante encaje verticalmente en su contenedor? ¡Al no hacerlo flotar más! Jaja. Buen intento, y lo suficientemente cerca como para ser considerado útil, en realidad.
Rolf

124

Para los padres:

display: flex;

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

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

Edición 2: como señaló @toddsby, alinear elementos es para padre y su valor predeterminado es en realidad estirar . Si desea un valor diferente para el niño, existe la propiedad de alineación propia.

Edición 3: jsFiddle: https://jsfiddle.net/bv71tms5/2/


3
Debe señalar que esto funciona solo en los navegadores modernos, e incluso entonces requiere prefijos de proveedor.
kontur

12
Me sorprende que esta solución no haya recibido más atención, dado que la pregunta original requiere que se divida la división infantil y toda la posición: las soluciones absolutas realmente arrojan una llave en las obras en la mayoría de las situaciones en las que usaría flotación. Esta solución proporciona una gran solución donde los efectos secundarios de la posición: absoluto no son un problema y si está dispuesto a profundizar un poco más, es posible obtener una compatibilidad bastante buena entre navegadores.
Lucas

Esta es la respuesta aquí mismo. IE9 saldrá pronto, también podría ayudarlo dándole una buena y sólida patada. Esta solución es tan agradable, simple y fácil ... He terminado de hackear soluciones alternativas. ;)
jrista

2
De acuerdo con la especificación más reciente para Flexbox: consulte w3.org/TR/css-flexbox-1/#align-items-property . align-items: stretch;no es obligatorio ya que es el valor predeterminado. También debe definirse en el padre, no en el hijo.
toddsby 01 de

1
Se agregó el violín en la respuesta. @Tigran
Aiphee

77

En realidad, siempre que el elemento padre esté posicionado, puede establecer la altura del niño al 100%. Es decir, en caso de que no desee que el padre esté absolutamente posicionado. 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>

14
Genial, esto es menos limitante que el requisito de Chadwick de position:absolute(que podría interferir con los estilos de un sitio)
Henry

3
Podría ser solo yo, pero tengo problemas si la barra lateral es más grande que el contenido. Un color de fondo se detendrá en el contenedor primario pero el contenido de la barra lateral se desbordará fuera del primario.
Howdy_McGee

Esta es una solución mucho más flexible, e incluso si tiene varios elementos secundarios flotantes, parece un inconveniente aceptable diseñar su desplazamiento en una posición absolutamente absoluta. +1
kontur

Gracias muy mucho. Publiqué mi solución específica como respuesta a otra pregunta en SO: stackoverflow.com/a/31749164/84661 .
Brian Haak

24

Mientras no necesite admitir versiones de Internet Explorer anteriores a IE8, puede usar esto display: table-cellpara 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 .innerclase a ocupar toda la altura de su elemento padre.


Aunque esto funcionará, no mostrará un margen, incluso si especifica uno. Por lo tanto, esta solución fallará si desea asignar un margen. Puede asignar relleno como una solución alternativa, pero ¿cómo resolvería esto si necesitara un margen (y no relleno)?
Devner

13
¿Me estoy perdiendo de algo? Su pregunta pide que un elemento flotante tenga una altura del 100%. Cuando flota, ¿un display: table-cell;elemento ya no llena la altura de su contenedor? Debo estar perdiendo algo, porque es tu propia pregunta ...?
user56reinstatemonica8

16

Hice un ejemplo resolviendo tu problema.

Tienes que hacer un envoltorio, flotarlo, luego colocar tu div absoluto y darle una altura del 100%.

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 .right div está absolutamente posicionado. Eso significa que su ancho y alto, y las positiones superior e izquierda se calcularán basándose en el primer div padre absoluto o en una 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, el 100% de la altura del DIV se calculará en función de la altura final del contenedor, y la posición final de la posición .right se calculará en función del contenedor principal.


1
Esta es una solución sólida para situaciones en las que puede garantizar que el .rightcontenido de la .leftcolumna es más corto que el contenido de la columna. Por ejemplo, si está usando esto en un componente en el que la .leftcolumna tiene contenido de tamaño variable y la columna derecha simplemente muestra una flecha a una página de detalles, entonces esta solución funciona bien. +1 por eso
Zachary Kniebel

15

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

  1. Establezca la visualización del contenedor de tres elementos (#outer): tabla
  2. Y establecer los elementos mismos (#inner) display: table-cell
  3. Eliminar el flotante.
  4. Éxito.
#outer{
    display: table;
}
#inner {
    display: table-cell;
    float: none;
}

Gracias a @Itay en flotante div, 100% de altura


8

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

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

Esto funciona bien para flotar un solo elemento a un lado con una altura del 100% de su elemento primario, 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.


18
Parece excesivo arrojar javascript a este problema de diseño.
kontur

1
Como alguien que tiene que desarrollarse en IE: ¡GRACIAS!
Torre el

1
Tal vez un poco exagerado, pero esta es una respuesta hermosa, ¡gracias!
Martin

1
Estoy de acuerdo en que todos los problemas de posicionamiento deben resolverse sin JS.
michaeluskov

1
Es excesivo usar JS y jQuery
ViliusL

3

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

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

Arriba está el CSS para div externo

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

Arriba está el div interno

Espero que esto te ayude


1

Esto me ayudo.

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

Cambie a la derecha: y a la izquierda: para configurar el # ancho interior preferible


1

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

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

Establecidos display: flex;para elementos primarios y flex: 1;secundarios, todos tendrán la misma altura.


Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.