Split the height of the screen to body and footer - html

Question

I need to split the screen to 2: body (around 90% of the screen) and footer (around 10% of the screen - fixed on bottom).
The footer should be transparent and the body should have a lot of text so would be a vertical scroll bar.
My problem is that the body's height isn't 90% of the height (but 100%) so I can see the text behind my footer.
How can I fix it?
Here's JSFiddle that shows my problem.
And the code:
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;
}
Thank you

Answer 1

Change your heights accordingly, but all you need is (CSS):
html, body {
height: 100%;
}
#body {
overflow: scroll;
}
Fiddle: https://jsfiddle.net/96jfew5s/4/

Answer 2

You have to set your parent (html and body tags) also to 100% of the height because if not you cannot set percentages to their childs (they try to get the percentage of their parents). Then, you can set your overflow-y: auto; to get the scroll in your body div.
Also, change the appropiate height to both body and footer divs.
Note: I would recommend you to change the name of your body div to other name that will not be related with reserved words to avoid confusions.
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>

Answer 3

Use 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>