Overflow - what am I doing wrong? - html

Question

I have been working on trying to get a page to display a title at the top of the content pane, and then a scrollable list of products below that so that the title of the product range is displayed at all times. I am sure this is a very simple thing to do - but cannot figure it out.
Currently the actual page (not the test page for which the code is given below) works ok in the sense that I set the heading div to 5% of the height of .content-container and then set the scrollable div to 95% with top: 5%, both with position: absolute applied.
However I would like to place some links in the heading div to different pages (1, 2, 3 etc), which I would like to center vertically if they are shorter than the heading and expand the heading div to match the height of the heading or the links, whichever is smallest. Furthermore I would like the div below the heading to shrink so that it doesn't go below the bottom of the content div as the heading div gets taller. The point of this is because it is for a client who may, or may not, be happy with the heading sizes and so on - therefore the heading div height could easily change. Specifying heights so precisely means that changing the h1 height could mean 5 changes to the CSS file - something I want to avoid.
The content pane currently has its height fixed to 80% of the page, with the header and footer being 10% each on top of that, so there is no scroll bar at the side of the page and the header / footer are always showing. This is something I would like to keep.
In the code below, .content-container is the main content pane - this is contained in another div which is centered using the margin at 50% of the page width. .test-div is the div which contains the heading. .test-div-2 is an attempt to place a div below .test-div, in the hope that I can force .test-div-3 to extend to 100% of its' height but no further, and to display a scroll bar if the content exceeds the height.
So far I have the following, but it doesn't do exactly what I would like it to:
<div class="content-container">
<div class="test-div">
<h1 style="text-align: center;">Dogs</h1>
</div>
<div class="test-div-2">
<div class="test-div-3">
//Content here
</div>
</div>
</div>
and here is the css :
.content-container {
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.test-div {
position: relative;
padding: 0;
margin: 0;
}
.test-div-2 {
position: relative;
background-color: #CCCCCC;
}
.test-div-3 {
max-height: 100%;
background-color: #999999;
}
Any help with this would be greatly appreciated. I would like to achieve this without the use of JavaScript / jQuery if possible - pure HTML / CSS solutions only please!

Answer 1

try
fixing the height of the scrolling div or any block level element and add overflow:scroll property or overflow-y:scroll property
Sample would be
.test-div-2
{
position: relative;
background-color: #CCCCCC;
overflow: scroll;
height: 100px;
}
.test-div-3
{
max-height: 100%;
background-color: #999999;
}
</style>
<div class="content-container">
<div class="test-div">
<h1 style="text-align: center;">
Dogs</h1>
<div class="clear">
</div>
</div>
<div class="test-div-2">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue
massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero,
sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus
a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. </p>
</div>
</div>

Answer 2

try this
.content-container
{
position: absolute;
width: 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.test-div
{
position: relative;
padding: 0;
margin: 0;
}
.test-div-2
{
position: relative;
background-color: #009933;
max-height:100px;
}
.test-div-3
{
max-height: inherit;
background-color: #0064ea;
overflow: scroll;
}
working example
jsFiddle