2015-06-26 7 views
1

У меня есть фиксированная высота заголовка и подзаголовок, я хочу, чтобы подзаголовок заполнил всю страницу, однако когда я это делаю, всегда есть небольшое смещение, вызывающее появление полосы прокрутки, как только вы изменить размер окна по высоте:Исправлено div и высота высоты div под

header { 
 
    width: 100%; 
 
    height: 55px; 
 
    z-index: 10; 
 
    background: #263238; 
 
} 
 
.sub-header { 
 
    background: #37474F; 
 
    height: 95vh 
 
}
<header></header> 
 
<div class="sub-header"></div>

Я гугл и гуглу и не могу найти ответ.

ответ

3

Две установки высоты не равны 100%. 95vh оставляет 5vh, однако заголовок установлен на 55px, как таковой, вместо 95vh для подзаголовка, do calc(100vh - 55px).

Вам также необходимо убедиться, что body не имеет заданного значения.

body{ 
 
    margin:0; 
 
} 
 
header { 
 
    width: 100%; 
 
    height: 55px; 
 
    z-index: 10; 
 
    background: #263238; 
 
} 
 

 
.sub-header { 
 
    background: #37474F; 
 
    height: calc(100vh - 55px) 
 
}
<header></header> 
 
<div class="sub-header"></div>

+1

Ура! Это все решило! :) Я буду помнить это, не знал, что CSS может рассчитать материал! –

+0

Не в тему: @ SW4 вы можете помочь мне с этим вопросом http://stackoverflow.com/questions/31071477/collapsible-divs-with-single-slider.ty –

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