Overflow - what am I doing wrong?
- by ClarkeyBoy
Hi,
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 centre 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 scrollbar 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 centred 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 scrollbar 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>
.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!
Regards,
Richard
