Div не будет растягивать всю высоту страницы (да, я много гуглил)

Я пытаюсь растянуть содержимое div на высоту страницы. Я погуглил проблему, и пока ничего не работает. Все это начинает вызывать у меня головную боль. Может быть, кто-то более опытный мог бы взглянуть на мой код? Полная таблица стилей>400 строк, так что я включаю то, что (надеюсь) актуально.

"Wrapper" занимает 100% высоты страницы, тогда как "contentShadow" растягивается только до высоты текста в div "content".

Редактировать: насколько я могу судить, высота каждого контейнера равна 100%, что также делает "contentShadow" 100%. Правильно...?

Редактировать 2: Я начинаю видеть проблему, но не знаю, как ее решить. Хотя следующий код будет удерживать нижний колонтитул, это также означает, что, поскольку.wrapper не имеет высоты:100%, "contentShadow" не будет растягиваться. Вопрос заключается в том, как я удерживаю нижний колонтитул при изменении этого кода:

.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -37px;

}

К этому:

.wrapper {
height: 100%;

}

Основная структура страницы:

<div id="body">
<div id="headerWrapper"></div>
<div id="wrapper">  
    <div id="contentShadow">
        <div id="#contentWrapper">
            <div id="content">
            <!-- contentshadow stretches the height of this content and no further, but SHOULD stretch the height of the entire page -->
            </div> 
        </div>
    </div>

<div id="push"></div>
</div>

<div id="footer"></div>

Правила CSS, относящиеся к этим элементам:

html, body {
height: 100%;
}

#headerWrapper {
height: 314px;
width: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -37px;
}

#contentShadow {
min-height: 100%;
width: 994px;
background-image: url(../images/contentShadow.png);
background-repeat: repeat-y;
   margin-right: auto;
margin-left: auto;
}

#contentWrapper {
min-height: 100%;
width: 940px;
margin-right: auto;
margin-left: auto;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
padding-top: 17px;
background-color: #EDECEC;
overflow: hidden;
}

#content {   
min-height: 100%;
}

.footer, .push,  {
height: 37px;
}

.footer {
background: white;   
clear: both;
height: 37px;
}
Источник

4 ответа

Вы действительно ошиблись кодом:

  • .wrapper соответствие <div class="wrapper"> не <div id="wrapper">,
  • <div id="#contentWrapper"> не правильно, стоит попробовать <div id="contentWrapper">
  • height: auto; это проблема. Обертка должна быть 100% высоты, а не авто...
  • height: 100% после height: auto !important не имеет смысла, из-за ключевого слова! Important.
Источник

Может быть, это стандартные поля и отступы, вы пробовали это?

body {margin: 0px; padding: 0px; }
Источник

У contentShadow должно быть переполнение: авто. Попробуй это

body, html { height: 100%; margin: 0; padding: 0; }
#container { width: 100%; height: 100%; overflow: auto; display: block; }


<body>
  <div id="container">
      This should fill the page!
  </div>
</body>
Источник

У меня была эта проблема для лучшей части моей жизни, но я просто решил ее для себя, так что я делюсь, на случай, если кто-то еще может извлечь выгоду.

Мой селектор HTML/BODY установлен на высоту:100%.

Мой контейнерный контейнер в селекторе HTML/BODY установлен на min-height:800px.

Мой блок CONTENT внутри блока CONTAINER не имел высоты, и у меня возникла проблема с тем, чтобы блок не растянулся до нижней части страницы. Когда я осмотрел этот div, я заметил, что по какой-то причине он растянулся ниже своего контейнера div, подтолкнул его вверх и создал то раздражающее пространство внизу страницы. Как только я установил высоту внутри DIV, проблема исчезла для меня.

Надеюсь, это поможет.

Источник
Другие вопросы по тегам