How do I get a vertical scroll bar on an inner div contained in a fixed dimension outer div?

Question

I'm looking for an HTML/CSS solution where an inner DIV has the following characteristics:

MUST HAVE:

• is included within a fixed height container div below a variable height sibling header div.
• fills available variable height with no max-height CSS property
• scrolls vertically if necessary to accommodate content
• is within a document having DOCTYPE = HTML 4.01 strict (preferably, HTML 5 if necessary)
• is multi-browser compatible (Chrome, Firefox, IE, Safari, mobile-phone browsers)

WOULD LIKE TO HAVE:

• does not use tables
• does not use JavaScript

So far, I have the following partial solutions:

• WebKit-only, with tables: http://jsfiddle.net/ksevksev/PBXZG/2/

---

HTML

<div class="parent">
    <table cellspacing="0">
        <tr><td class="header">Heading</td></tr>
        <tr><td class="scrollContainer"><div class="innerScroll">
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
            ...
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
            </div>
        </td></tr>
    </table>
</div>

CSS

.parent
{
    margin:0px;
    padding:0px;
    height: 400px;
    background-color: orange;
    border: thick purple solid;
}

table
{
    border:green thick solid;
    width:100%;
    height:100%;
    margin:0px;
}

.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
    margin: 0px;
    position: relative;
    border: thick blue solid;
    bottom:0px;
    top:0px;
    left:0px;
    right: 0px;
    height:100%;
}

.innerScroll
{
    overflow-y: auto;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

---

• Multi-browser with jQuery: http://jsfiddle.net/ksevksev/yDJrV/1/

---

HTML

<div class="parent">
    <div class="header">Heading</div>
    <div class="scrollContainer">
        <div class="innerScroll">
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
            ...
            Lots of text goes here. Lots of text goes here. Lots of text goes here.
        </div>
    </div>
</div>

CSS

.parent
{
    margin:0px;
    padding:0px;
    height: 400px;
    background-color: orange;
    border: thick purple solid;
}
.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
    position: relative;
    border: thick blue solid;
    bottom:0px;
    top:0px;
    left:0px;
    right: 0px;
    height:100%;
}

.innerScroll
{
    position: absolute;
    overflow-y: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

JS

var container = $(".scrollContainer");
var header = $(".header");
var parent = $(".parent");
var containerHeight = parent.innerHeight() - header.outerHeight();
//alert("containerHeight=[" + containerHeight + "]");
container.outerHeight(containerHeight);

---

Thank you in advance for your help!

Answer 1

If it's not an issue to manually set the height of the header you can use absolute positioning on the scroll area and set the top to be the height of the header. I'm araid you are not going to get much closer with pure css.

http://jsfiddle.net/Neograph734/yDJrV/2/

.parent
{
    margin:0px;
    padding:0px;
    height: 400px;
    background-color: orange;
    border: thick purple solid;
    position: relative;
}
.header
{
    font-weight: bold;
    font-size: 28pt;
    font-family: sans-serif,Arial;
    border:yellow thick solid;
}

.scrollContainer
{
    position: absolute;
    border: thick blue solid;
    bottom:0px;
    top:55px; /* This is the header height */
    left:0px;
    right: 0px;

}

.innerScroll
{
    position: absolute;
    overflow-y: auto;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 100%;
}

Update

If javascript is not a problem, you could use this small piece of jquery

var headerHeight = $('.header').outerHeight();
$('.scrollContainer').css('top', headerHeight);

Working example here: http://jsfiddle.net/Neograph734/yDJrV/3/