...

View Full Version : 100% height container; scrolling within a div



TomD
08-21-2009, 10:33 AM
I know there is a lot to be found on similar problems, but I haven't found a solution for this problem yet.

I'm using a container div with height 100% so the screen is competely filled in the vertical direction.


#container {
position:relative;
width: 780px;
background: #DDDDDD;
margin: 0 auto;
margin-top:0px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
height:auto !important; /* real browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* real browsers */
color:#333333;
overflow:hidden;
}

Within this container, there are a few divs (top for navigation and then a left and right div), the right div contains the content. When the content of this div exceeds the available space of the screen height, I want a scrollbar to appear within this div (so no global scrollbar on the level html/body/container).

Apparently, making the height of this div 100% within the container does not work. Is there a way to specify the height of this content div in such a way that it sees the 100% height of the container (screen-filling) as an "absolute, fixed" height? Because in the current situation, it just enlarges the container div to fit all the text, exceeding the available screen height and thus creating a "global" scrollbar.

Thanks in advance!

abduraooft
08-21-2009, 10:42 AM
Could you post a link to your page?

TomD
08-21-2009, 10:48 AM
You can find a test version here (http://www.td-hosting.com/BvA2/index.php). If you click on "Geschiedenis", you get a page with test content that (probably) exceeds the screen heigth, creating a scrollbar on the right. In such a case, I want a scrollbar within that content div... This is no problem if I specify the heigth of this div in a fixed way, but the heigth I want it to be is resolution-dependent (namely, screen-filling).

noneforit
08-21-2009, 12:43 PM
Adding a fixed height to the right container seems to give a scroll bar.

Less than 1200px seems to be ok but any more seems to dissapear the scroll bar

TomD
08-21-2009, 12:54 PM
But then the surrounding container-div also enlarges to this height, also creating a scrollbar at the right where I don't want it.
I suppose the 100% height for the container is not really what I need. I want it to be screen filling, which can indeed be achieved with 100% if the content does not exceed the page height but which doesn't work if there is more content (the 100% then makes the container div to be large enough to fit all the text, rather than keeping it fixed at the screen height).

Perhaps this can be solved by using Javascript to detect the (available) screen height and using this variable as the fixed height of the container div. But I am unsure on how to correctly implement this in my html/css code. This seems a rather technical (and perhaps not very reliable) solution to me, so if there's an alternative with purely html/css, that would be nice...

Scriptet
08-21-2009, 01:17 PM
What do you mean you want 100% height, and if content exceeds 100% height then add a scroll bar for the div?

Then you just add

max-height: 100%;
overflow: scroll;

Max Height prevents the DIV from automatically extending, and overflow: scroll; adds the scrollbar (note: overflow: hidden as you have makes the content not visibile, so you need overflow:scroll; )

TomD
08-21-2009, 01:21 PM
What do you mean you want 100% height, and if content exceeds 100% height then add a scroll bar for the div?
Perhaps "100% height" is not the best way to put it. I want the site to fill the screen in the vertical direction at all times: not less (which already works, if there is not "enough" content, the min-height 100% of the container extends the div to the bottom of the screen; see "home" on the link I posted) but also not more (which doesn't work, see "geschiedenis" on the link). If there is more content than room on the screen, I want the internal content div to get a scrollbar and not a global scrollbar at the level of html, body or the container div. This keeps the top navigation visible at all times, for example.

noneforit
08-21-2009, 01:35 PM
This is a bit confusing :confused:

Your container Div is set to Auto for the height meaning that any content within the child divs will cause the container to expand. This means the container div will always expand if any of the child divs expand.

Apologies if im not getting what you want

Scriptet
08-21-2009, 01:41 PM
Right I can think of one way,

For your content you'd give it a min-height and max-height of 100%, and add overflow:auto, so indeed scrollbars were to appear if the content were to extend this.

Now the only problem with this would be is that the menu is above it, so the layout would be 100% + the size of the menu if you get me.

So to get around this we'd give the content a negative top margin of the height menu to shove it upwards.

TomD
08-21-2009, 01:41 PM
This is a bit confusing :confused:

Your container Div is set to Auto for the height meaning that any content within the child divs will cause the container to expand. This means the container div will always expand if any of the child divs expand.

Apologies if im not getting what you want
Hm yes, you are right about the "auto". But if I remove that (and only leave the 100% for height and min-height in the container), the container still expands when the content div (child in container) expands...

I don't want the container to ever become larger than the available screen height. When the content div needs more room, I want a scrollbar to appear only in that content div (so the navigation remains visible and no "top level" scroll bar appears). I'm obviously not using the correct css-code to do that, but is it clear how I want it to work?

noneforit
08-21-2009, 01:49 PM
How are you going to check the screen resolution of the user when the page loads?

You say you dont want the content to scretch further than the screen resolution but unless you give it either a fixed height or a max-height then its always going too as it doesnt know what screen resolution you have

TomD
08-21-2009, 01:52 PM
Right I can think of one way,

For your content you'd give it a min-height and max-height of 100%, and add overflow:auto, so indeed scrollbars were to appear if the content were to extend this.

Now the only problem with this would be is that the menu is above it, so the layout would be 100% + the size of the menu if you get me.

So to get around this we'd give the content a negative top margin of the height menu to shove it upwards.
I understand your solution (I think) and it seems to be working more or less. I've updated the code, you can check it here (http://www.td-hosting.com/BvA2/geschiedenis.php). I've already added a (positive) padding of the same height to shift the text to the right starting height (since that moved upwards as well), now the layout just needs fixing because the content div overlaps the navigation. I assume there's a way to make the navigation be the "top div" (overlapping the unused part of the content div), but then there's a new problem: the scroll bar of course starts all the way at the top too (due to the negative margin)...

TomD
08-21-2009, 01:54 PM
Or is there a way to do arithmetic in the css, mixing the relative and absolute measures? Then I could set the min and max height of that div to "100% minus the absolute height of the navigation"...

Scriptet
08-21-2009, 01:58 PM
Or is there a way to do arithmetic in the css, mixing the relative and absolute measures? Then I could set the min and max height of that div to "100% minus the absolute height of the navigation"...

This is the point I was at.
You can make the nav bar position:relative; z-index:1 which will shove it above the content, and then add a DIV inside the content with some padding to shove the text down.
But as you will see this causes a problem with the scrollbar starting from the top.

It's exactly this:
Then I could set the min and max height of that div to "100% minus the absolute height of the navigation"..

What we need to get around. I thought you could set your navigation to say a height of 10%, and then your content to 90%, but this would cause a problem with people minimizing their browser windows.

TomD
08-21-2009, 01:58 PM
How are you going to check the screen resolution of the user when the page loads?

You say you dont want the content to scretch further than the screen resolution but unless you give it either a fixed height or a max-height then its always going too as it doesnt know what screen resolution you have
Well, after a search on this problem I found there appear to be ways to detect the resolution (or even better: the available screen height) with Javascript and send this value as a parameter to the css file (which is actually a php file then). I didn't get this to work and I'm afraid it's not the most reliable and easy solution, so I was hoping there was a way to do this with plain html/css, using the min/max-height properties and perhaps some tricks I don't know...

TomD
08-21-2009, 02:08 PM
This is the point I was at.
You can make the nav bar position:relative; z-index:1 which will shove it above the content, and then add a DIV inside the content with some padding to shove the text down.
This worked indeed, to get the navigation at the top.



But as you will see this causes a problem with the scrollbar starting from the top.
Yes :(


What we need to get around. I thought you could set your navigation to say a height of 10%, and then your content to 90%, but this would cause a problem with people minimizing their browser windows.
Indeed, and it might cause the navigation height to be too small or too large depending on the resolution.

noneforit
08-21-2009, 02:08 PM
Ah ritey got ya.

Hmmm i may well be wrong on this but i dont think there is a way to do this with CSS and HTML. The term 100% seems to refer to the content as opposed to the dimentions of the screen.

For example

You have a container div, a header div, a content div and a footer div.
Your container div has a height of 100%, which means the total height of all child divs

Say your header is 150px, your content 500px and your footer 50px.
This means your container div will stretch itself to be 700px in size as you have told it to be 100%.


If you set a min height on a child div, this means to make fit the entire height of its parent div, regardless of the content.

Im really not sure if you can do what you want with purely CSS and HTML

Happy to be proved incorrect because im not an expert by any means

TomD
08-21-2009, 02:12 PM
Hmmm i may well be wrong on this but i dont think there is a way to do this with CSS and HTML. The term 100% seems to refer to the content as opposed to the dimentions of the screen.
That's right, so perhaps my initial question was a bit confusing as it seemed like I wanted it to be "100%" while I meant "available screen height".


Im really not sure if you can do what you want with purely CSS and HTML
Perhaps it's not possible, there doesn't seem to be a very easy or straightforward way (otherwise I would've found it with a search, I guess). But it doesn't seem such a "strange construction" to me, I can hardly believe that no other sites want or already use such a structure, so perhaps there is some kind of workaround. There seems to be one with Javascript or using php in css to make it dynamic, but so far I couldn't get that working.

TomD
08-21-2009, 03:20 PM
Just wanted to let you know that I think I have the Javascript+PHP-solution working (click (http://www.td-hosting.com/BvA2/geschiedenis.php)) :)

I'm going to continue playing around a bit and test the browser compatbility. Thanks for the help!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum