element to fill remaining vertical height with scrollbars if needed

Question

What is the most modern solution to the following layout requirement:

two elements are to fit inside a container element, and not extend outside of that container.

each are 100% width of container.

And the sum of their heights added together is the same as the container height(maybe some padding or margins involved).

the header element is to expand vertically to fit its content.

the .fillNscroll element is to fill the remaining vertical space to the bottom of div.info and apply vertical scroll bars if it vertically overflows within that constraint.

can i do this with just CSS3 and HTML5 ? (not worried about compatibility with earlier browsers). If not is there a jQuery plugin ?

 +------------------------+
 |       <section>        |
 |   fixed width & height |
 |                        |
 |  +------------------+  |
 |  |     <header>     |  |
 |  | variable height  |  |
 |  |                  |  |
 |  |                  |  |
 |  +------------------+  |
 |                        |
 |  +------------------+  |
 |  |<div.fillNscroll> |  |
 |  | fill remaining   ^  |
 |  |   height         |  |
 |  |                  |  |
 |  |  with scrollbars |  |
 |  |   on overflow    |  |
 |  |                  |  |
 |  |                  V  |
 |  +------------------+  |
 |                        |
 +------------------------+

HTML5:

<section class="info">

    <header>
      <h1>Halophryne queenslandiae (and the occasional extra long name that causes the header to flow into multiple lines)</h1>
    </header>

    <div class="fillNscroll">
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
      <p>Variable length content. may overflow the .fillNscroll div eventually</p>
    </div>

  </section>

CSS (LESS):

// make padding and border inside width and height for everything !
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

div, h1, h2, h3, p, .info {
  border: 1px solid red;
}

section.info {
  position: absolute;
  left: 50px;
  width: 200px;
  height:300px;
  padding: 10px;

  header { 

  }

  .fillNscroll{
    height: 100%;
  }

}

can i do this with just CSS3 and HTML5 ? (not worried about compatibility with earlier browsers)

Give this a peek and see if it does what you want - http://jsfiddle.net/EmCNN/ — TimSPQR, Jun 12 '14 at 03:08
@TimSPQR the height of `.fillNscroll` does not adjust to fill remaining vertical height, after header has been sized to fit its content (which varies). in your fiddle it is fixed at 200px — johowie, Jun 12 '14 at 03:14
Is the .info height fixed at 300px? Do you want to keep the the fillNScroll inside the .info? If it is dynamic, you'll have to use js. — TimSPQR, Jun 12 '14 at 03:25
@TimSPQR yes `.info` has fixed height. yes `.fillNscroll` is to remain within `.info`. content is rendered dynamically — johowie, Jun 12 '14 at 03:30
@TimSPQR that is certainly working. It never ceases to surprise me that such things require more than css — johowie, Jun 12 '14 at 04:23
anyone got any suggestions utilising flex box or display:table-row ? — johowie, Jun 12 '14 at 04:24
possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — user123444555621, Jun 12 '14 at 04:38
@Pumbaa80 so according to that post there was no way to do it with just css and html in 2008 and you are saying in 2014 we still need to use javascript for this layout arrangement. If that is the case then i agree it is a duplicate question — johowie, Jun 12 '14 at 07:40
Did you read the answers? http://stackoverflow.com/a/16960823/27862 — user123444555621, Jun 12 '14 at 08:07
@Pumbaa80 i can't understand how the specific answer you refer to achieves the scrollbars i seek on overflow of the second element (which fills the remaining vertical space after the first variable height element) in the container — johowie, Jun 12 '14 at 12:06
@Pumbaa80 can i set overflow-y:auto; on a div that has display:table-row ? — johowie, Jun 12 '14 at 12:09

element to fill remaining vertical height with scrollbars if needed

0 Answers0