Сделать элемент div растянутым на всю высоту страницы

Question

Сделать элемент div растянутым на всю высоту страницы

0

Я построил этот маленький ap в угловом и хотел бы, чтобы элемент контейнера растягивал всю высоту страницы, когда содержимое не заполняет высоту страницы, например, на большом экране, на этой странице нет:

http://purepremier.com/#/teams/57

Я попробовал настроить его на

position: absolute;
top:0;
bottom:0; 
height:100%

но когда содержимое переполняется, высота контейнера только увеличивается до высоты окна просмотра.

Есть идеи? Или это способ угловатого, чтобы добавить класс в тело?

user1937021 03 июль 2015, в 18:12

Источник

Теги:

angularjs

css

3 ответа

0

html, body {height:100%; min-height:100%; margin:0; padding:0;}
#full {background:red; height:100%;}

<div id='full'>hmm</div>

Moob 03 июль 2015, в 14:05

0

Абсолютное позиционирование - это не способ установить полную высоту документа, но он устанавливает высоту видового экрана. Вместо этого вы можете использовать фиксированную позицию:

#element{
  position: fixed;
  top:0;
  bottom:0; 
}

Bhojendra Rauniyar 03 июль 2015, в 13:54

Ещё вопросы

Paulie_D · Accepted Answer · 2015-07-03T12-49-00.000Z

Да, просто

* {
  margin: 0;
  padding: 0;
}
.container {
  min-height: 100vh;
  background: red;
}

<div class="container">
</div>

Демо-версия JSfiddle

Поддержка единиц просмотра

Или для альтернативы

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.container {
  min-height: 100%;
  background: red;
}

<div class="container">

</div>

поддержка браузера "VH" это ie9 +. кто сегодня использует ie8?
Я только что понял, что окно просмотра окна не так. Он просто получает высоту випорта, а не высоту документа.
Но OP хочет установить высоту документа, а не только высоту области просмотра.
может быть, мы ...only stretchs to the viewport height но видя ...only stretchs to the viewport height я думал.
Мой связанный JSfiddle, кажется, указывает (в Chrome), что контейнер продолжает покрывать любую высоту содержимого, даже если его недостаточно. Попробуйте запустить скрипку с и без высоты div "divander".