css - page - Div padres no se expanden a la altura de los niños

height css porcentaje

Question

Como verás, tengo un div ( #innerPageWrapper ) que envuelve los divs que contienen el contenido. #innerPageWrapper también actúa visualmente como un borde semitransparente en el diseño.

Mi problema es que #innerPageWrapper no se expandirá para que quepan los niños adentro, y mucho menos se expanda para llenar el resto de la página.

Este es el código para #innerPageWrapper

#innerPageWrapper {
    width: 1100px;
    height: 100%;
    display: inline-block;
    padding: 0 50px 0 50px;
    background: rgba(0, 0, 0, 0.75) url(navShadow.png) repeat-x top;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

He intentado muchas cosas (incluyendo el uso de calc () para div alturas) sin éxito. Quiero evitar usar jQuery.

Answer 1

En primer lugar, está utilizando la height:100%; que en tu caso es incorrecto Para obtener una explicación sobre por qué no usar la height:100% , consulte this artículo;

Para entender por qué, necesitas entender cómo los navegadores interpretan altura y anchura. Los navegadores web calculan el ancho total disponible en función de la amplitud con la que se abre la ventana del navegador. Si no establece ningún valor de ancho en sus documentos, el navegador fluirá automáticamente el contenido para llenar todo el ancho de la ventana.

Pero la altura se calcula de manera diferente. De hecho, los navegadores no evalúan la altura en absoluto a menos que el contenido sea tan largo que salga del puerto de la vista (lo que requiere barras de desplazamiento) o si el diseñador web establece una altura absoluta en un elemento de la página. De lo contrario, el navegador simplemente deja que el contenido fluya dentro del ancho del puerto de visualización hasta que llegue al final. La altura no se calcula en absoluto. El problema se produce cuando establece una altura porcentual en un elemento cuyos elementos primarios no tienen las alturas establecidas. En otras palabras, los elementos principales tienen una altura predeterminada: auto ;. En efecto, le está pidiendo al navegador que calcule una altura a partir de un valor no definido. Dado que eso equivaldría a un valor nulo, el resultado es que el navegador no hace nada.

En segundo lugar, para hacer que el div exterior (en este caso #innerPageWrapper ) se envuelva alrededor de los elementos secundarios, debe usar overflow:hidden en este envoltorio.

Para que esto funcione correctamente, sus elementos secundarios no deben ser position:absolute como lo ha hecho para #contentMain y #contentSidebar , en su lugar, haga estos flotadores ( float: left y float: right ) y después de que se cierre la div #contentSidebar , agregue un <div style="clear:both"></div> para despejar flotadores, permitiendo que el padre los envuelva perfectamente.

He puesto el CSS requerido en this Pastebin, tenga en cuenta que debe borrar sus flotadores usando un div como mencioné anteriormente.

Answer 2

Intente establecer el ancho y la altura del elemento padre en auto. Ejemplo simplificado:

http://jsfiddle.net/kimgysen/8nWDE/

#innerPageWrapper {
    width:auto;
    height:auto;
    background:red;
}

#innerPageWrapper p{
    width: 100px;
    height: auto;
    margin: 10px auto;
    background: yellow;
}

Editar:

Compruebe este violín para ver un ejemplo más avanzado, que incluya el centro horizontal y vertical: http://jsfiddle.net/kimgysen/8nWDE/1/

El elemento padre se adaptará dinámicamente a los límites de los elementos hijos.
También puede establecer el ancho y la altura dinámicos en elementos secundarios.

.outerDiv{
    display: table-cell;
    background-color: yellow;
    width: auto; 
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv{
    display: inline-block;
    background-color: red; 
    width: 100px;
    height: 100px;
    margin: 20px;
}