Для div для увеличения полной высоты

Можно ли использовать метод div для расширения до полной высоты? У меня тоже есть липкий нижний колонтитул.

Здесь веб-страница: Сайт удален. Средний бит, о котором я говорю, это белый div, midcontent, который имеет значения CSS:

.midcontent{
     width:85%;
     margin:0 auto;
     padding:10px 20px;
     padding-top:0;
     background-color:#FFF;
     overflow:hidden;
     min-height:100%;
     max-width:968px; 
     height:100%;
}

Итак, да, очевидно, height:100% не работает. Кроме того, ВСЕ родительские контейнеры имеют набор высот.

Здесь общая структура

<body>
    <div id="wrap">
        <div id="main">
            <div class="headout">
                <div class="headimg"></div>
            </div>
            <div class="midcontainer"></div>
        </div>
    </div>
    <div id="footer">
        <div class="footer"></div>
    </div>

Ответы

Ответ 1

Помните ли вы, чтобы установить высоту тегов html и body в CSS? Как правило, я получил DIVs для увеличения до полной высоты:


<html>
  <head>
    <style type="text/css">

      html,body { height: 100%; margin: 0px; padding: 0px; }
      #full { background: #0f0; height: 100% }

    </style>
  </head>
  <body>
    <div id="full">
    </div>
  </body>
</html>

Ответ 2

Это может быть полезно: http://www.webmasterworld.com/forum83/200.htm

Соответствующая цитата:

Большинство попыток выполнить это были сделаны путем присвоения свойства и значения: div {height: 100%} - это само по себе не сработает. Причина в том, что без определения родителя height, div {height: 100%;} не имеет значения для 100% процентов и будет по умолчанию значение div {height: auto;} - auto - это "как необходимое значение", которое определяется фактическим контента, так что div {height: 100%} будет a = только расширяться, насколько требует контент.

Решение проблемы найдено путем назначения значения высоты родительскому контейнеру, в этом случае - элемент тела. Написание вашего тела stlye, чтобы включить высоту 100% поставок необходимое значение.
html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

Ответ 3

Это старый вопрос. CSS развился. Теперь есть модуль vh (высота окна просмотра), а также новые опции компоновки, такие как flexbox или CSS grid для достижения классического дизайна более чистыми способами.

Ответ 4

Если по какой-то причине элемент визуализируется выше высоты HTML или тела, я бы использовал jQuery, чтобы сделать раздел больше.

<script type="text/javascript">
    $($('#full').height($('#main').height()));
</script>

Ответ 5

если установка высоты на 100% не работает, попробуйте min-height = 100% для div. Вам все еще нужно установить HTML-тег.

html {
    height: 100%;
    margin: 0px;
    padding: 0px;
    position: relative;
}

#fullHeight{

    width: 450px;
    **min-height: 100%;**
    background-color: blue;

}