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

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

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

Я попытался установить его

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

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

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

источник

2015-07-03 user1937021

Вы можете использовать высоту: 100vh; (vh означает высоту видового экрана). Итак, 100vh в основном означает «высота экрана» –

http://jsfiddle.net/uf2u32gf/ Я видел это в Интернете, я не уверен, как работать во всех браузерах. – aahhaa

просто посмотрите его http://caniuse.com/#search=vh не уверен, что с ним все в порядке. – aahhaa

Yep, просто

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

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

JSfiddle Demo

Support for viewport units

Или альтернативный

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

<div class="container"> 
 

 
</div>

источник

2015-07-03 15:42:48

поддержка браузера "vh" это ie9 +. который сегодня использует ie8? –

Я просто понял, что блок просмотра не является таким. Он просто увеличивает высоту вилета, а не высоту документа. –

Но OP хочет установить высоту документа не только высоту видового экрана. –

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

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

источник

2015-07-03 15:42:10

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

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

источник

2015-07-03 15:51:39 Moob

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

ответ

Смежные вопросы