múltiples colores de fondo para divs anidados css

Question

Está bien. Esta es la situación. He creado un sitio web con un banner en la parte superior negro con un logotipo, su altura es de 100 px y su color de fondo es # 000. A continuación quiero un "main_content" gran div para abarcar la navegación a lo largo de todo contenido dentro de la página, por lo que no incluiría el pie de página. En este caso hay varios divs anidados dentro del área main_content de la página y ya hay un color de fondo definido por ellos. El problema es que una vez que aplico un color de fondo a la div llamado "main_content" sólo se aplica a la barra de navegación y luego se detiene porque se ejecuta en el div anidado que ya tiene un color definido. Me pregunto si hay regla CSS que me falta aquí ...

La única solución que he encontrado es que tiene que definir una altura de la div main_content, ¿hay una forma de evitar esto? Yo no quiero tener que definir una altura para el área de contenido, porque yo quiero que solo coincide con la altura del contenido que lo llena.

Answer 1

Lo que es más probable que ocurra es que sus otros divs anidados están heredando el color de sus padres div main_content, para solucionar este problema, debe proporcionar el color de forma explícita para su divs anidados. Otra cosa que usted ha mencionado es que desea aplicar a la altura main_content según su contenido puede hacerlo dándole una altura de 100%, por ejemplo:

<style>
#main_content{height:100%;}
</style>

Answer 2

Creo que he encontrado que, overflow: hidden, no estoy seguro si esta es la solución correcta pero es el mejor que tengo