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 >
  <span>&copy; <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span>
  <span style="float:right;">
        <a class = "footernav" >{{'ACCESSIBILITY' | translate}}</a>&nbsp;&nbsp;&nbsp;
        <a class = "footernav1" >{{'PRIVACY_AND_LEGAL' | translate}}</a>&nbsp;&nbsp;&nbsp;
        <a class = "footernav" >{{'SITEMAP' | translate}}</a>
      </span>
</footer>

CodePudding user response：

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 >
  <span>&copy; <span>{{currentYear}}</span>{{'FOOTER' | translate}}</span>
  <span style="float:right;">
    <a >{{'ACCESSIBILITY' | translate}}</a>&nbsp;&nbsp;&nbsp;
    <a >{{'PRIVACY_AND_LEGAL' | translate}}</a>&nbsp;&nbsp;&nbsp;
    <a >{{'SITEMAP' | translate}}</a>
  </span>
</footer>