Для div, чтобы расширить на полную высоту - PullRequest
Новая
       0

Для div, чтобы расширить на полную высоту

64 голосов
/ 27 декабря 2010

Есть ли метод, который я могу использовать, чтобы 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>

Ответы [ 3 ]

126 голосов
/ 29 декабря 2010

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


<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>
37 голосов
/ 27 декабря 2010

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

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

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

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

html, body { 
  margin:0; 
  padding:0; 
  height:100%; 
}
0 голосов
/ 05 октября 2018

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

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

#fullHeight{

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

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...