Make a div to fill the remaining dynamic height and scroll without javascript

Question

I have a document structure that supports a header at the top of the page and a footer at the bottom. It works well while the content in the middle is less than the height of the window. If the content is too long, the footer moves further than the page and the full-body scroll bar is displayed. How to force the scroll bar to be limited to the contents of the DIV.

Note that the contents of the header and footer are not fixed, so I do not know the heights of these elements and cannot set the top position of the content element as a fixed value. I added the show / hide function in the example to demonstrate this.

I am trying to resolve this in pure CSS (avoiding Javascript). I know that with javascript I could control the window size and visibility of the element, I could calculate the height of the header and footer and set fixed sizes in the content element. But is there a solution other than javascript?

http://jsfiddle.net/sA5fD/1/

html { height: 100%; }
body {      
    padding:0 0;
    margin:0 0;
    height: 100%;
}
#main {
    display:table;
    height:100%;
    width:100%;
}
#header, #footer {
    display:table-row;
    background:#88f;
}
#more {
    display: none;
}
#content {
    display:table-row;
    height:100%;
    background:#8f8;
}

It should work for all modern browsers, desktops, tablets and mobile phones. For older browsers, the full-body scrollbar will be fine.

Answer 1

If you add two lock blocks:

<div id="content">
  <div id="content-scroll-wrap">
    <div id="content-scroll">
      content...

Then use CSS:

#content-scroll-wrap {
    position: relative;
    height: 100%;
}
#content-scroll {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    overflow: auto;
}

http://jsfiddle.net/sA5fD/8/

I do not know about support in older browsers. IE may require some fixes.

Answer 2

:

HTML

<div class="parent"> 

  <div class="child">
    <div class="large-element> </div>
  </div>

</div>

CSS

 .parent {
   height: 1000px
   overflow-y: scroll; 
 }

 .child {
   background-color: royalblue;
   height: auto;
 }

 .large-element {
   height: 1200px; 
 }

. ​​ , , . 100%, 1000px, !

: https://codepen.io/meteora/pen/JJYoZM

:)