html - posicion - Expandiendo un padre<div> a la altura de sus hijos
posicion fija css (15)
¿Estás buscando un diseño CSS de 2 columnas ?
Si es así, eche un vistazo a las instrucciones , es bastante sencillo para comenzar.
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 el div padre se expanda en height cuando aumente la height del div interior.
Editar:
Un problema es que si el width del contenido secundario se expande más allá del width de la ventana del navegador, mi CSS actual coloca una barra de desplazamiento horizontal en la div principal. Me gustaría que la barra de desplazamiento esté en el nivel de la página. Actualmente mi div principal está configurada para overflow: auto;
¿Puedes ayudarme por favor con el CSS para esto?
¿Hace esto lo que quieres?
.childRightCol, .childLeftCol
{
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
Añadir
clear:both;
Para el css del div principal, o agregue un div en la parte inferior del div principal que se aclare: ambos;
Esa es la respuesta correcta, porque desborda: auto; puede funcionar para diseños web simples, pero ensuciará con elementos que comienzan a usar cosas como el margen negativo, etc.
Añadir un clear:both . asumiendo que sus columnas están flotando. Dependiendo de cómo se especifique la altura del padre, es posible que necesite un desbordamiento: auto;
<body>
<div id="parent">
<div id="childRightCol">
<div>
<div id="childLeftCol">
<div>
<div id="clear" style="clear:both;"></div>
</div>
</body>
Como dijo Jens en comentario.
Una respuesta alternativa es ¿Cómo hacer div no más grande que su contenido? … Y propone configurar display: inline-block. Lo que funcionó muy bien para mí. - Jens el 2 de junio a las 5:41.
Esto funciona mucho mejor para mí en todos los navegadores.
Debe aplicar la solución clearfix en el contenedor principal. Aquí hay un buen artículo que explica el link corrección
Esto está funcionando como lo describe la especificación. Varias respuestas son válidas y consistentes con lo siguiente:
Si tiene hijos de nivel de bloque, la altura es la distancia entre el borde superior del borde del bloque de niño de nivel de bloque superior que no tiene los márgenes contraídos y el borde inferior del cuadro de niño de nivel de bloque inferior. Eso no tiene márgenes colapsados a través de él. Sin embargo, si el elemento tiene un relleno superior y / o borde superior distinto de cero, o es el elemento raíz, el contenido comienza en el borde superior del borde 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 niños superiores e inferiores, mientras que en el segundo caso la presencia del relleno / borde evita que los márgenes superiores se colapsen). De manera similar, si el elemento tiene un relleno inferior que no es cero y / o un borde inferior, entonces el contenido finaliza en el borde inferior del margen del elemento inferior.
desde aquí: https://www.w3.org/TR/css3-box/#blockwidth
Hice una división div primaria en torno al contenido de una div secundaria teniendo la div secundaria como una sola columna que no tiene ningún atributo de posicionamiento como el 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 la división infantil más profunda de #wrap, esto define la profundidad de #wrap div y el relleno de 200px en cada lado crea dos grandes columnas en blanco para que coloque divs con la posición absoluta que desee. Incluso podría cambiar el relleno superior e inferior para colocar divs de encabezado y divs de pie de página usando position: absolute.
Intenta esto para el padre, funcionó para mí.
overflow:auto;
ACTUALIZAR:
Una solución más que funcionó:
Padre :
display: table;
Niño
display: table-row;
Para aquellos que no pueden entender esto en las instrucciones de esta respuesta :
Intente establecer el valor de relleno más de 0 , si los divs secundarios tienen un margen superior o inferior, puede reemplazarlo con el relleno
Por ejemplo si tienes
#childRightCol
{
margin-top: 30px;
}
#childLeftCol
{
margin-bottom: 20px;
}
Será mejor reemplazarlo con:
#parent
{
padding: 30px 0px 20px 0px;
}
Si su contenido dentro de #childRightCol y #childRightCol se desplaza a la izquierda o a la derecha, simplemente agregue esto en 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; }
Trate de dar el max-content para la altura de los padres.
.parent{
height: max-content;
}
Usar algo como div auto-claro es perfecto para una situación como this . Entonces solo usarás una clase sobre el padre ... como:
<div id="parent" class="clearfix">
Yo uso este CSS para los 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%;
#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>
usted está gestionado mediante el overflow:hidden; propiedad en css