Разделить высоту экрана на нижний колонтитул

Question

Мне нужно разделить экран на 2: корпус (около 90% экрана) и нижний колонтитул (около 10% экрана - зафиксировано на нижней части). Нижний колонтитул должен быть прозрачным, а тело должно иметь много текста, поэтому это будет вертикальная полоса прокрутки. Моя проблема заключается в том, что высота тела не составляет 90% от высоты (но 100%), поэтому я могу видеть текст за нижним колонтитулом.

Как это исправить? Вот JSFiddle, который показывает мою проблему.

И код:

HTML:

<div id="body"> 
    texttext<br/>text<br/>text 
</div> 
<div id="footer"> 
    this is footer 
</div> 

CSS:

#body{ 
    height:80%; 
} 

#footer{ 
    width:100%; 
    height:30px; 
    position:fixed; 
    bottom:0; 
    left:0; 
    color: blue; 
    text-align: center; 
    background: red; 
    opacity: .5; 
} 

Спасибо

Answer 1

Измените высоту соответственно, но все, что вам нужно (CSS):

html, body { 
    height: 100%; 
} 

#body { 
    overflow: scroll; 
} 

Fiddle: https://jsfiddle.net/96jfew5s/4/

Answer 2

Использование Viewport units: vw, vh, vmin, vmax

*{box-sizing: border-box} 
 
body{ 
 
    margin: 0 
 
} 
 

 
#body{ 
 
    height: 90vh 
 
} 
 

 
#footer{ 
 
    height:10vh; 
 
    color: blue; 
 
    text-align: center; 
 
    background: red; 
 
    opacity: .5; 
 
} 
 

 
#body,#footer{ 
 
    display: block; 
 
    overflow-x:hidden; 
 
    overflow-y: scroll 
 

 
}

<div id="body"> 
 
    texttext<br/>text<br/>text 
 
</div> 
 
<div id="footer"> 
 
    this is footer 
 
</div>

Answer 3

Вы должны установить родителя (html и body теги) также до 100% от высоты, потому что если не вы не можете устанавливают проценты их детям (они пытаются получить процент своих родителей). Затем вы можете установить overflow-y: auto;, чтобы получить свиток в вашем body div.

Также измените подходящую высоту как на body, так и на footer.

Примечание: Я бы рекомендовал вам изменить имя вашего body div на другое имя, которое не будет связано с зарезервированными словами, чтобы избежать путаницы.

html, body{ 
 
    height: 100%; 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#body{ 
 
    height:90%; 
 
    max-height: 90%; 
 
    overflow-y: auto; 
 
} 
 

 
#footer{ 
 
    width:100%; 
 
    height:10%; 
 
    position: fixed; 
 
    bottom:0; 
 
    left:0; 
 
    color: blue; 
 
    text-align: center; 
 
    background: red; 
 
    opacity: .5; 
 
}

<div id="body"> 
 
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/> 
 
</div> 
 
<div id="footer"> 
 
this is footer 
 
</div>