Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts

    100% height container; scrolling within a div

    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.

    Code:
    #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!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Could you post a link to your page?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    You can find a test version here. 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).

  • #4
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    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

  • #5
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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...
    Last edited by TomD; 08-21-2009 at 12:59 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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; )

  • #7
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    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.

  • #8
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    This is a bit confusing

    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

  • #9
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    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.

  • Users who have thanked Scriptet for this post:

    TomD (08-21-2009)

  • #10
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by laurieballard View Post
    This is a bit confusing

    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?

  • #11
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    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

  • #12
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Scriptet View Post
    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. 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)...

  • #13
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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"...

  • #14
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by TomD View Post
    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.

  • #15
    New Coder
    Join Date
    Aug 2009
    Posts
    28
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by laurieballard View Post
    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...


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •