Scrollable div beneath a variable height header

Question

I'm having trouble getting the scroll correct on the section element. The section element either doesn't scroll or does scroll but either the content or scroll bar gets pushed off the page.

http://jsbin.com/EBuNonI/1/edit?html,css,output

Ideally the header is variable height, the section is the full height of the browser and it's content scrolls if needed. The body/page as a whole shouldn't be scrollable though, just the section.

The problem obviously lies in the section having a height of 100% as it adds it to the variable height of the header. If I take away the sections 100% height then I lose the scroll.

• Trying not to use absolute/fixed positioning (mobile app) or JS

• If I give the header a fixed height (not ideal) and give the section padding-bottom equal to the fixed height then although the last list item is visible the scroll bar goes off the page.

HTML

<div class="container">
  <header>
  </header>
  <section>
    <ul>
      <li>First Item</li>
      <li>Last Item</li>
    </ul>
  </section>
</div>

CSS

body, html { height: 100%; }
body { margin: 0; padding: 0; overflow: hidden; }

.container { height: 100%; }

section { 
  height: 100%;
  overflow-y: scroll; 
}

Answer 1

Had a little go at it, this is what I came up with. Take a look tell me what you think.

HTML:

<div class="container">
    <header>Navigation Testing Testing Testing Testing</header>
    <section>
        <div>
            <ul>
                <li>First Item</li>
                <li>3</li>
                <li>Last Item</li>
            </ul>
        </div>
    </section>
</div>

CSS:

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body, html {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container {
    height: 100%;
    width: 30%;
    display: table;
}
header {
    padding: 24px;
    background: blue;
    display: table-row;
}
section {
    height: 100%;
    padding: 24px;
    background: tomato;
    display: table-row;
}
section div {
    overflow-y: scroll;
    height: 100%;
}
ul {
    margin: 0;
    paddding: 0;
}

I used display:table; to be able to make this possible, that way they share the height.

DEMO HERE