Как установить div для автоматической настройки его высоты с доступной высотой браузера - PullRequest
Новая
       34

Как установить div для автоматической настройки его высоты с доступной высотой браузера

1 голос
/ 18 мая 2011

У меня есть div (позиция: фиксированная) с переменной высотой в зависимости от содержимого в нем.Для автоматической прокрутки я добавил overflow-y:auto и назначил фиксированную высоту.

Есть ли способ автоматически установить высоту div, чтобы при изменении пространства в браузере высота div изменялась соответствующим образом, а при нехватке места появлялась полоса прокрутки и когдадостаточно свободного места, полоса прокрутки исчезает.

Ответы [ 3 ]

5 голосов
/ 18 мая 2011

используйте position:absolute вместо position: fixed и используйте верхнюю левую, правую и нижнюю координаты и установите прокрутку в автоматический режим;

пример HTML : 

<div id="resize">
  <p>content</p><p>content</p><p>content</p><p>content</p>
</div>

CSS: 

#resize {
background: #f00;
color: white;
position: absolute;
top: 100px;
left: 200px;
right: 200px;
bottom: 100px;
overflow: auto;
}

p {line-height: 3; margin: 0;}

Рабочий пример: Здесь

2 голосов
/ 18 мая 2011

Используйте два DIV, один вложенный в другой.

Внешний DIV должен быть установлен на position:fixed;max-height:100%;overflow-y:auto

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

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

EDIT: Пример разметки: 

<div id="outer">
   <div class="inner">
      Content goes here.
   </div>
</div>

И CSS:

#outer{
   position:fixed;
   max-height:100%;
   overflow-y:auto;
   bottom:0; /* sample value */
   left:0;   /* sample value */
}
#outer div.inner{
   /* Whatever style you want the positioned box
      to have. Border, padding, background, etc. */
}
1 голос
/ 18 мая 2011

Вы можете прослушать событие изменения размера в окне и соответствующим образом обновить ширину. 

$(window).resize(function() {

});

http://api.jquery.com/resize/

В качестве альтернативы, в зависимости от макета вашей страницы, вы можете просто использовать height: 100% (или другой%, который вам подходит).

...