height=100%/height=100vh going beyond screen - html

Question

I have set height:100% but its going beyond screen, how do I restrict height to not go beyond footer.
Overflow scrollbars should not go beyond footer.
If you check the scroll bar for #two , the lower end of it will not be visible but I want #two height to be restricted till footer, so lower end of the scroll should be above footer.
p {
display: block;
background: #eee;
}
#one>p {
height: 100%;
}
#two>p {
height: 100vh;
overflow-y: scroll;
}
.nimbusfooter {
left: 0;
right: 0;
bottom: 0;
position: fixed;
color: white;
background: black;
padding: 5px;
font-size: 10pt;
line-height: 23.5px;
}
.footernav {
color: white;
text-decoration: underline;
}
.footernav1 {
color: white;
text-decoration: underline;
}
<div id="one" style="height:50px">
<p>100% Height</p>
</div>
<div id="two" style="height:50px">
<p>100vh Height</p>
</div>
<footer class="nimbusfooter">
<span>© <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span>
<span style="float:right;">
<a class = "footernav" >{{'ACCESSIBILITY' | translate}}</a>
<a class = "footernav1" >{{'PRIVACY_AND_LEGAL' | translate}}</a>
<a class = "footernav" >{{'SITEMAP' | translate}}</a>
</span>
</footer>

Answer 1

Is this what you're looking for? Marked up code below. Pop a comment on if not.
/* made the body 100vh tall with no margins so no overflow bars will appear on the body */
body {
margin:0;
height: 100vh;
/*make children flex items so we can use flex-grow and flex-shrink to control their size */
display: flex;
flex-direction:column;
}
body > div {
/* make the div elements (i.e. not the footer which is a <footer> element) grow to fit the available space */
flex-grow:1;
}
p {
/* removed the display: block from these. not really needed */
background: #eee;
height: 100%;
}
#two {
overflow-y: scroll;
}
.nimbusfooter {
color: white;
background: black;
padding: 5px;
font-size: 10pt;
line-height: 23.5px;
flex-grow:0;
flex-shrink:1;
}
.footernav, .footernav1 {
color: inherit; /* changed this from white to inherit, so always adopts parent value */
text-decoration: underline;
}
<div id="one" style="height:50px">
<p>100% Height</p>
</div>
<div id="two" style="height:50px">
<p>100vh Height</p>
</div>
<footer class="nimbusfooter">
<span>© <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span>
<span style="float:right;">
<a class="footernav">{{'ACCESSIBILITY' | translate}}</a>
<a class="footernav1">{{'PRIVACY_AND_LEGAL' | translate}}</a>
<a class="footernav">{{'SITEMAP' | translate}}</a>
</span>
</footer>