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

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

1 голос
/ 06 февраля 2012

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

«Обертка» занимает 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 правила, относящиеся к этим div: 

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 ]

4 голосов
/ 06 февраля 2012

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

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

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

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

Для моего контейнера div в селекторе HTML / BODY установлено значение min-height: 800px.

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

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

1 голос
/ 06 февраля 2012

У 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>
0 голосов
/ 06 февраля 2012

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

body {margin: 0px; padding: 0px; }
...