Expandir un padre <div> a la altura de sus hijos

308

Tengo una estructura de página similar a esta:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Me gustaría que los padres divse expanda en heightcuando el interior div's heightse incrementa.

Editar:
Un problema es que si el widthcontenido secundario se expande más allá widthde la ventana del navegador, mi CSS actual coloca una barra de desplazamiento horizontal en el primario div. Me gustaría que la barra de desplazamiento esté en el nivel de página. Actualmente mi div principal está configurado enoverflow: auto;

¿Me pueden ayudar con el CSS para esto?

html css Steve Horn
fuente
66
¿Estás flotando los divs internos? ¿Puedes publicar el CSS actual?
Eric
2
@Eric - también fue mi problema - mi (s) hijo (s) flotaban: a la izquierda, cuando lo quité, ¡'padre' fue automáticamente reconocido y estirado a toda su altura!
Michael Goltsman

Respuestas:

539

Prueba esto para los padres, funcionó para mí.

overflow:auto;

ACTUALIZAR:

Una solución más que funcionó:

Padre :

display: table;

Niño :

display: table-row;
Dr. Casper Black
fuente
67
overflow:autosignifica que el navegador debe decidir qué valor aplicar. Lo que realmente hace el truco es overflow: overlay.
Alba Mendez
14
@jmendeth No existe un valor de desbordamiento denominado "superposición". Lo que funciona si los divs flotantes están flotando es declarar overflow:hidden.
Christoph
16
Waaaait. Relajarse. Una cosa es afirmar overlayque no es compatible fuera de Webkit. Otra completamente diferente es decir que no existe en absoluto. Por favor, RTFM primero . ;)
Alba Mendez
66
Si solo está en Webkit, solo existe el 20%: P Felicitaciones por el enlace, nunca antes había visto este sitio web. ¿Está bien mantenido y actualizado? ¿Juras por eso?
pilau
20
Una respuesta alternativa es stackoverflow.com/questions/450903/… y se propone configurar display:inline-block. Lo que funcionó muy bien para mí.
Jens
26

agregar a clear:both. asumiendo que sus columnas están flotando. Dependiendo de cómo se especifica su altura principal, puede necesitar un desbordamiento: auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
bendewey
fuente
Hacer esto me da una barra de desplazamiento horizontal en el div principal cuando el contenido es más ancho que la ventana del navegador. Me gustaría que el desplazamiento horizontal esté en toda la página.
Steve Horn
1
¿Por qué necesita el desbordamiento: auto ;? En mi prueba lo claro: ambos; suficiente
Paolo Bergantino
3
Esto también supone que el padre no tiene una altura especificada.
bendewey
Este enfoque funciona bien en Firefox, pero no funciona en IE 6. ¿Alguna solución?
Steve Horn
4

Para aquellos que no pueden entender esto en las instrucciones de esta respuesta allí:

Tratar de establecer el relleno valor de más a continuación, 0 , si divs niños tienen margin-top o margin-bottom se puede reemplazar con el acolchado

Por ejemplo si tienes

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

será mejor reemplazarlo con:

#parent
{
    padding: 30px 0px 20px 0px;
}
imy
fuente
4

Usar algo como la autolimpieza dives perfecto para una situación como esta . Entonces solo usarás una clase en el padre ... como:

<div id="parent" class="clearfix">
Tim Knight
fuente
3

Añadir 

clear:both;

Al css del div principal, o agregue un div en la parte inferior del div primario que aclare: ambos;

Esa es la respuesta correcta, porque desborda: auto; puede funcionar para diseños web simples, pero se enredará con elementos que comienzan a usar elementos como el margen negativo, etc.

Marketing en Internet Boise
fuente
2

¿Hace esto lo que quieres?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
Eric
fuente
1

Hice que un div padre se expandiera alrededor del contenido de un div hijo al hacer que el hijo div como una sola columna que no tiene ningún atributo de posicionamiento como absoluto especificado.

Ejemplo:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Basado en que maincolumn div es el div secundario más profundo de #wrap, esto define la profundidad del #wrap div y el relleno de 200px a cada lado crea dos grandes columnas en blanco para que coloques divs posicionados absolutamente como quieras. Incluso podría cambiar el relleno superior e inferior para colocar divs de encabezado y divs de pie de página usando position: absolute.

Ian
fuente
0

Debe aplicar la solución clearfix en el contenedor principal. Aquí hay un buen artículo que explica el enlace de reparación

Nikhil
fuente
0

Si su contenido dentro de #childRightCol y #childRightCol está flotando hacia la izquierda o hacia la derecha, simplemente agregue esto a css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
usuario3436572
fuente
0

Esto funciona como se describe en la especificación: varias respuestas aquí son válidas y coherentes con lo siguiente:

Si tiene elementos secundarios de nivel de bloque, la altura es la distancia entre el borde superior del cuadro secundario superior de nivel de bloque que no tiene márgenes contraídos y el borde inferior del cuadro secundario inferior de nivel de bloque que no tiene márgenes colapsados ​​a través de él. Sin embargo, si el elemento tiene un margen superior y / o borde superior distinto de cero, o es el elemento raíz, entonces el contenido comienza en el borde del margen superior del elemento secundario superior. (El primer caso expresa el hecho de que los márgenes superior e inferior del elemento colapsan con los de los hijos superiores e inferiores, mientras que en el segundo caso la presencia del relleno / borde evita que los márgenes superiores colapsen). De manera similar, si el el elemento tiene un relleno inferior distinto de cero y / o un borde inferior, luego el contenido termina en el borde del margen inferior del elemento secundario más inferior.

desde aquí: https://www.w3.org/TR/css3-box/#blockwidth

Adam Tolley
fuente
0

El siguiente código funcionó para mí.

css

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
anjaneyulubatta505
fuente
0 

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}
Expandir fragmento

Su mejor apuesta
fuente
0

De donde comenzamos

Aquí hay algunos HTML y CSS repetitivos. En nuestro ejemplo, tenemos un elemento primario con dos elementos secundarios flotantes.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Expandir fragmento

Solución # 1: desbordamiento: auto

Una solución que funciona en todos los navegadores modernos y en Internet Explorer de nuevo a IE8 es agregar overflow: autoal elemento padre. Esto también funciona en IE7, con barras de desplazamiento agregadas.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Expandir fragmento

Solución # 2: Contenedor flotante para padres

Otra solución que funciona en todos los navegadores modernos y de vuelta a IE7 es hacer flotar el contenedor principal.

Es posible que esto no siempre sea práctico, porque flotar su div principal puede afectar otras partes del diseño de su página.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Expandir fragmento

Método n. ° 3: Agregue la división de compensación debajo de los elementos flotantes

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
Expandir fragmento

Método # 4: Agregue Clearing Div al elemento padre Esta solución es bastante a prueba de balas para navegadores antiguos y navegadores nuevos por igual.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Expandir fragmento

de https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

jafar690
fuente
-1

Yo uso este CSS para padres y funciona:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
pejman
fuente
2
Se utiliza min-altura, por lo que no cuenta;)
pilaf
-1 

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>
Expandir fragmento

eres administrado usando overflow:hidden;propiedad en css

Chintan Kotadiya
fuente