Для 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>
4 61

4 ответа:

вы помните установку высоты тегов 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>



Это может помочь:http://www.webmasterworld.com/forum83/200.htm

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

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

решение проблемы найдено путем присвоения высоту родительского контейнера, в этом случае элемент тела. Написание вашего тела stlye, чтобы включить высоту 100% поставок необходимое значение.

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}

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

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

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

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

#fullHeight{

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

}