Беда в речном городе с CSS

Question

Хорошо, вот сайт:

http://danberinger.com/

Если вы просмотрите исходный код для HTML и CSS, вы увидите, что я установил высоту div в середине на 100% и присвоил ему значение свойства переполнения скрытого, это называется main_content. Я понял, что значение высоты не влияет на то, что отображается, значение переполнения скрытого позволяет фоновому цвету элемента main_content распространяться вниз до нижнего колонтитула. Я думаю, мне интересно, как лучше всего добиться переменной высоты div на каждой странице или "main_content" при сохранении цвета фона. Я делаю это правильно или я использую какой-то css-хак, который не является правильным способом сделать это. Все идеи приветствуются. Обязательно посмотрите исходный HTML и CSS, прежде чем дать мне ответ.

Answer 1

Самое простое решение - назначить цвет фона элементу body. Как то так:

body {
 margin: 0;
 padding: 0;
 width:100%;
 height:100%;
 background-color:#cccccc;
}

Это также устранит белую границу в несколько пикселей по краям, если вы хотите сохранить это, удалите объявления margin и padding.

Answer 2

Я предпочитаю делать так:

В содержимое div 'main-content' добавить

В вашем случае это было

<div id="main_content">
    <div id="navigation">..</div>
    <div id="intro_container">..</div>
</div>

Это можно переписать как

<div id="main_content">
    <div id="navigation">..</div>
    <div id="intro_container">..</div>
    <div style="clear:both"></div>
</div>

AFAIK Это стандартный способ добиться того, что вы делаете.

Answer 3

Возможно, я неправильно понял, что вы хотите, но попробуйте это:

Заменить div # intro_container на:

div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}

И удалите свойство высоты из окна сообщений div #.