html - pantalla - CSS-Expandir la altura DIV del hijo flotante a la altura de los padres

height dinamico css

Question

Tengo la estructura de la página como:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Ahora, el DIV de la child-left del child-left tendrá más contenido, por lo que la altura del DIV del parent aumenta según el DIV del niño.

Pero el problema es que child-right altura del child-right no está aumentando. ¿Cómo puedo hacer que su altura sea igual a su padre?

Answer 1

¿Tiene el padre una altura? Si establece la altura de los padres como tal.

div.parent { height: 300px };

Entonces puedes hacer que el niño se estire a la altura completa de esta manera.

div.child-right { height: 100% };

EDITAR

Aquí es cómo lo harías usando JavaScript.

Answer 2

Encontré muchas respuestas, pero probablemente la mejor solución para mí es

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Puede consultar otras soluciones aquí http://css-tricks.com/fluid-width-equal-height-columns/

Answer 3

La visualización de la tabla CSS es ideal para esto:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Respuesta original (asumida que cualquier columna podría ser más alta):

Usted está tratando de hacer que la altura de los padres dependa de la altura de los niños y la altura de los niños depende de la altura de los padres. No se computará. CSS Faux columnas es la mejor solución. Hay más de una manera de hacer eso. Prefiero no usar JavaScript.

Answer 4

Me enteré de este buen truco en una entrevista de pasantía. La pregunta original es cómo garantizar que la altura de cada componente superior en tres columnas tenga la misma altura que muestre todo el contenido disponible. Básicamente, cree un componente secundario que sea invisible que represente la altura máxima posible.

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>

Answer 5

Para el elemento parent , agregue las siguientes propiedades:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

entonces para .child-right estos:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Encuentre resultados más detallados con ejemplos de CSS here y más información sobre columnas de igual altura here .

Answer 6

Para el padre:

display: flex;

Para niños:

align-items: stretch;

Usted debe agregar algunos prefijos, compruebe caniuse.

Answer 7

Por favor, configure el div padre para overflow: hidden
Luego, en divs para niños, puede establecer una gran cantidad para el relleno inferior. por ejemplo
padding-bottom: 5000px
luego margin-bottom: -5000px
y entonces todos los divs infantiles serán la altura del padre.
Por supuesto, esto no funcionará si está tratando de poner contenido en el div principal (fuera de otros divs).

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Ejemplo: http://jsfiddle.net/Tareqdhk/DAFEC/

Answer 8

Recientemente he hecho esto en mi sitio web usando jQuery. El código calcula la altura del div más alto y establece los otros divs a la misma altura. Aquí está la técnica:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

No creo en height:100% funcionará, así que si no conoces explícitamente las alturas de div, no creo que haya una solución CSS pura.

Answer 9

Si conoce Bootstrap, puede hacerlo fácilmente mediante el uso de la propiedad ''flex''. Todo lo que necesita hacer es pasar las propiedades de css a la división principal.

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

donde .homepageSection es mi div padre. Ahora agregue div niño en su html como

<div class="abc col-md-6">
<div class="abc col-md-6">

donde abc es mi div niño. Usted puede verificar la igualdad de estatura en ambos div niños independientemente de la frontera simplemente dando frontera a div infantil

Answer 10

Una solución común a este problema utiliza el posicionamiento absoluto o los flotadores recortados, pero son complicados porque requieren un ajuste exhaustivo si sus columnas cambian de número + tamaño, y necesita asegurarse de que su columna "principal" sea siempre la más larga. En su lugar, te sugiero que uses una de las tres soluciones más robustas:

1. display: flex : de lejos, la solución más simple y mejor, y muy flexible, pero no es compatible con IE9 y versiones anteriores.
2. table o display: table : muy simple, muy compatible (casi todos los navegadores), bastante flexible.
3. display: inline-block; width:50% display: inline-block; width:50% con un corte de margen negativo: bastante simple, pero los bordes de la parte inferior de la columna son un poco difíciles.

1. display:flex

Esto es realmente simple, y es fácil de adaptar a diseños más complejos o más detallados, pero flexbox solo es compatible con IE10 o posterior (además de otros navegadores modernos).

Ejemplo: http://output.jsbin.com/hetunujuma/1

Html relevante:

<div class="parent"><div>column 1</div><div>column 2</div></div>

CSS relevante:

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

¡Flexbox tiene soporte para muchas más opciones, pero para tener cualquier número de columnas basta con las anteriores!

2. <table> o display: table

Una forma simple y extremadamente compatible de hacer esto es usar una table . Le recomendaría que lo intente primero si necesita soporte de IE antiguo . Estás tratando con columnas; Los divs + flotadores simplemente no son la mejor manera de hacerlo (sin mencionar el hecho de que los múltiples niveles de divs anidados solo para evitar las limitaciones de css no son más "semánticos" que el simple uso de una tabla simple). Si no desea utilizar el elemento de la table , considere css display: table (no compatible con IE7 y versiones anteriores).

Ejemplo: http://jsfiddle.net/emn13/7FFp3/

HTML relevante: (pero considere usar una <table> simple en su lugar)

<div class="parent"><div>column 1</div><div>column 2</div></div>

CSS relevante:

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

Este enfoque es mucho más robusto que el uso de overflow:hidden con flotadores. Puedes agregar casi cualquier número de columnas; puedes tenerlos a escala automática si quieres; y conservas la compatibilidad con los navegadores antiguos. A diferencia de lo que requiere la solución flotante, tampoco es necesario saber de antemano qué columna es la más larga; la altura escala muy bien.

KISS: no uses hacks flotantes a menos que lo necesites específicamente. Si IE7 es un problema, todavía elegiría una tabla simple con columnas semánticas en lugar de una solución de truco-CSS menos difícil de mantener, cualquier día.

Por cierto, si necesita que su diseño sea receptivo (por ejemplo, no hay columnas en teléfonos móviles pequeños), puede usar una consulta @media para volver al diseño de bloque simple para anchos de pantalla pequeños. Esto funciona si usa <table> o cualquier otro otra display: table elemento de display: table .

3. display:inline block con un corte de margen negativo.

Otra alternativa es usar display:inline block .

Ejemplo: http://jsbin.com/ovuqes/2/edit

HTML relevante: (¡la ausencia de espacios entre las etiquetas div es significativa!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

CSS relevante:

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Esto es un poco complicado, y el margen negativo significa que el fondo "verdadero" de las columnas está oculto. Esto, a su vez, significa que no puede posicionar nada en relación con la parte inferior de esas columnas porque eso está cortado por overflow: hidden . Tenga en cuenta que además de los bloques en línea, puede lograr un efecto similar con los flotadores.

TL; DR : use flexbox si puede ignorar IE9 y versiones anteriores; de lo contrario intente una tabla (css). Si ninguna de esas opciones funciona para usted, hay cortes de margen negativo, pero estos pueden causar problemas de visualización extraños que son fáciles de perder durante el desarrollo, y hay limitaciones de diseño que debe tener en cuenta.

Answer 11

Utilicé esto para una sección de comentarios:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
 align-items: stretch;
 float: left;
 width:135px;
 padding:10px 10px 10px 0px;
 height:inherit;
 border-right:2px solid black;
}

.child-right {
 align-items: stretch;
 float: left;
 width:468px;
 padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Podría hacer flotar el derecho del niño hacia la derecha, pero en este caso, he calculado con precisión los anchos de cada div.

Answer 12

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

Utilicé el estilo en línea solo para dar idea.