Несколько цветов фона для CSS вложенных DIV

Question

Хорошо.Это ситуация.Я создал веб-сайт с черным баннером в верхней части с логотипом, его высота составляет 100 пикселей, а цвет фона - # 000.Далее я хочу, чтобы большой div "main_content" охватывал навигацию вместе с любым содержимым на странице, чтобы он не включал нижний колонтитул.В этом случае в области main_content страницы есть несколько вложенных элементов div, и для них уже определен цвет фона.Проблема в том, что как только я применяю цвет фона к элементу div, называемому «main_content», он только применяет его к панели навигации, а затем останавливается, потому что он попадает во вложенный элемент div, для которого уже определен цвет.Мне интересно, есть ли здесь правило CSS, которого я здесь пропускаю ...

Единственное найденное мной исправление - то, что я ДОЛЖЕН определить высоту для div main_content, есть ли способ обойти это?Я не хочу определять высоту для области содержимого, потому что я хочу, чтобы она просто соответствовала высоте содержимого, которое ее заполняет.

Answer 1

Я думаю, что нашел, переполнение: скрыто, я не уверен, что это правильное решение, но лучшее, что у меня есть

Answer 2

Скорее всего, это происходит из-за того, что ваши другие вложенные элементы div наследуют цвет от своего родительского элемента main_content, чтобы исправить это, вы должны явно указать цвет для вложенных элементов div. Другая вещь, которую вы упомянули, это то, что вы хотите применить высоту к main_content в соответствии с его содержимым, которое вы можете сделать, задав ему высоту 100%, например:

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