www.webdeveloper.com
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 57

Thread: DIV container adjusting to screen height

  1. #1
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304

    Exclamation DIV container adjusting to screen height

    Hi there!

    I'd like my page to fill up the available screen height, and adjust smoothly when resizing the window. The code below works reasonably in Mozilla, but messes up in IE6.

    - I've tried body{height:100%} but with no luck.
    - If I set the DIV container height to 100%, it will continue off the screen, which don't like.
    - I have also used the 'bottom' property for my footer, but if I am not mistaking it is not recognized by older browsers.

    I read somewhere that it takes Javascript to solve this problem, but I'd like to do it without.

    Who's got the answer?

    merry X-mas,
    Jochem
    Code:
    body	{margin:0; padding:0; height:100%;}
    
    #BORDER, #HEADER, #CLIFF, #MENU, #INDEX, #CONTACT, #TEXT, #BOTTOM {visibility:visible; position:absolute; padding:0; background-position:0px 0px; background-repeat:no-repeat;}
    
    #BORDER {width:750px;               left:50%;   top:0px;    z-index:3; margin-left:-379px; border:4px solid #000000;}
    #HEADER {width:750px; height:100px; left:0px;   top:0px;    z-index:2; background-color:#ffdd00;}
    #CLIFF  {width:128px; height:128px; left:0px;   top:100px;  z-index:2; background-color:#de0000;}
    #MENU   {width:128px; height:100%;  left:0px;   top:228px;  z-index:2; background-color:#aabbcc;}
    #INDEX  {width:422px; height:45px;  left:128px; top:100px;  z-index:2; background-color:#0000ff;}
    #CONTACT{width:200px; height:45px;  left:550px; top:100px;  z-index:2; background-color:#ddeeff;}
    #TEXT   {width:622px; height:100%;  left:128px; top:145px;  z-index:2; background-color:#00ff00;}
    #BOTTOM {width:750px; height:100px; left:0px;   bottom:0px; z-index:1; background-color:#00ccee;}
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head><link rel="stylesheet" type="text/css" href="stylesheet.css" /></head>
    <body>
    <div id="BORDER">
        <div id="HEADER" >header </div>
        <div id="CLIFF"  >cliff  </div>
        <div id="MENU"   >menu   </div>
        <div id="INDEX"  >index  </div>
        <div id="CONTACT">contact</div>
        <div id="TEXT"   >text   </div>
        <div id="BOTTOM" >bottom </div>
    </div>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  3. #3
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Thank you for posting the link. The point lays in the last section of the linked article.
    The spec says: "If the height of the containing block is not specified explicitly (i.e., it depends on content height), the value is interpreted like 'auto'." This means that if you do not define any height at all for the containing block, a percentual height of any contained block doesn't work: the block becomes once again exactly as high as it needs to be.
    It is the div-containers #MENU and #TEXT that I want to stretch to fill the exact remaining viewport height. And according to the article that is not possible. I could of course solve the problem with a frameset, but I want to avoid that. It seems search engines donít like them, resulting in a loss of visitors. I also want to avoid using Javascript. And I do want to leave the doctype tag in.

    My current website has three versions, where the one loaded will depend on your screen resolution. Iíd like to reduce this to just one version. I would, however, also like the bottom border and a bottom background image to be shown at the bottom of the screen, regardless of the resolution. I am looking for a cross-browser way to achieve this with pure CSS. Is it possible?

    Jochem

  4. #4
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I also learned that the "bottom" property is not recognized by all browsers. In stead, all DIVs and background images should be positioned by "top, left". Is that correct?

    cheers, Jochem

  5. #5
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    I have updated the script. I'm getting close, but it is still not sattisfying. Anyone got an idea?

    1. On high resolution it looks nice, but on 800x600 the MENU and MAIN divs continue off the bottom of the viewport. Of course the 70% and 80% height for the MENU and MAIN divs are not what I want. They should fit exactly and make contact with the lower border.
    2. The FOOTER div is positionned bottom:0px. As I wrote above, not all browsers accept the bottom-property.

    cheers, Jochem
    Code:
    html,body {margin:0; padding:0; height:98%;}
    
    #BORDER, #HEADER, #INDEX, #CONTACT, #CLIFF, #MENU, #MAIN, #FOOTER {visibility:visible; position:absolute; padding:0; background-position:0px 0px; background-repeat:no-repeat;}
    
    #BORDER	{width:750px; height:100%;  left:50%;   top:4px;    z-index:2; margin-left:-379px; border:4px solid #000000;}
    #HEADER	{width:750px; height:100px; left:0px;   top:0px;    z-index:1; background-color:#aaccee;}
    #INDEX	{width:422px; height:45px;  left:128px; top:100px;  z-index:1; background-color:#bbddff;}
    #CONTACT {width:200px; height:45px;  left:550px; top:100px;  z-index:1; background-color:#ddeeff;}
    #CLIFF	{width:128px; height:128px; left:0px;   top:100px;  z-index:1; background-color:#bbccdd;}
    #MENU	{width:128px; height:70%;   left:0px;   top:228px;  z-index:1; background-color:#aabbcc;}
    #MAIN	{width:622px; height:80%;   left:128px; top:145px;  z-index:3; background-color:#eeddcc;}
    #FOOTER	{width:750px; height:100px; left:0px;   bottom:0px; z-index:2; background-color:#aaccee;}
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head><link rel="stylesheet" type="text/css" href="stylesheet.css" /></head>
    <body>
        <div id="BORDER">
    	<div id="HEADER" >header </div>
    	<div id="INDEX"  >index  </div>
    	<div id="CONTACT">contact</div>
    	<div id="CLIFF"  >cliff  </div>
    	<div id="MENU"   >menu   </div>
    	<div id="MAIN"   >main   </div>
    	<div id="FOOTER" >footer </div>
        </div>
    </body>
    </html>

  6. #6
    Join Date
    Jan 2005
    Posts
    2
    Code:
    #verticle{
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -200px;
      margin-left: -350px;
      width: 700px;
      height: 400px;
    }
    margin-top and margin-left need to be set at half the width and height

    _joe

  7. #7
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Hello Joeko,

    Thanx for your contribution, but I don't see how this script could help me. It seems to be a script to center a container on the page. The problem is, however, that the height will be variable depending on the users screen-resolution. Therefore it cannot be set to 400px.

    cheers, Jochem

  8. #8
    Join Date
    Jan 2005
    Posts
    2
    it was an example. if i read correctly, you were trying to center content as if it were a liquid table design.

  9. #9
    Join Date
    Dec 2004
    Location
    Neca Valley, Pennsyltucky
    Posts
    388
    Originally posted by joeko
    it was an example. if i read correctly, you were trying to center content as if it were a liquid table design.
    I think he just wants his divs to fill the entire vertical space regardless of content amount.

  10. #10
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Yes Triumph, that is what I want indeed. Is it that a difficult problem?

    cheers, Jochem

  11. #11
    Join Date
    Dec 2004
    Location
    Neca Valley, Pennsyltucky
    Posts
    388
    Originally posted by jochem
    Yes Triumph, that is what I want indeed. Is it that a difficult problem?
    Apparently it is.

    From this page: http://www.evolt.org/article/Ten_CSS...know/17/60369/

    Background colour running to the screen bottom


    One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:


    #navigation
    {
    background: blue;
    width: 150px;
    }


    Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?


    Unfortunately the only solution to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:


    body
    {
    background: url(blue-image.gif) 0 0 repeat-y;
    }


    This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.


    At the time of writing though, this is the only solution to this particular problem so the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

  12. #12
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    Hi Triumph, thanks for posting an interesting link. I see the point, but I don't think it's going to help me.
    The effect seems to be just the same as having the div-height set to 100%.
    I have put it to test, which can be seen at my test-site.

    Please note:
    1. the MENU div is set to 100% height and continues outside the border;
    2. like MENU div, the MAIN div should align with FOOTER2 as well, but it doesn't;
    3. the red band is the body background image you suggested;
    4. the background colors are only for testing purposes.
    5. when resizing to low resolution (800x600), the border disappears below the viewport;
    6. for FOOTER 1 and 2 the 'bottom' property is used, which I'd like to avoid (see above).

    The CSS of my test-site is as follows:
    Code:
    html,body {margin:0; padding:0; height:98%;}
    
    body {background: url(img_nav/bg_menu.gif) 0 0 repeat-y;}
    
    #BORDER, #HEADER, #INDEX, #CONTACT, #CLIFF, #MENU, #MAIN, #FOOTER1, #FOOTER2 {visibility:visible; position:absolute; padding:0; background-position:0px 0px; background-repeat:no-repeat;}
    
    #BORDER	{width:750px; height:100%;  left:50%;   top:4px;   z-index:2; margin-left:-379px; border:4px solid #000000;}
    #HEADER	{width:750px; height:100px; left:0px;   top:0px;   z-index:1; background-color:#aaccee;}
    #INDEX	{width:422px; height:45px;  left:128px; top:100px; z-index:1; background-color:#bbddff;}
    #CONTACT {width:200px; height:45px;  left:550px; top:100px; z-index:1; background-color:#ddeeff;}
    #CLIFF	{width:128px; height:128px; left:0px;   top:100px; z-index:1; background-color:#bbccdd;}
    #MENU	{width:128px; height:100%;  left:0px;   top:228px; z-index:1; background-color:#aabbcc;}
    #MAIN	{width:614px; height:75%;   left:128px; top:145px; z-index:3; background-color:#eeddcc;
    
             margin-left                :0px;
             margin-right               :0px;
             margin-top                 :0px;
             margin-bottom              :0px;
    
             padding-left               :0px;                   /* code recognized by IE only */
             padding-right              :8px;
             padding-top                :10px;
             padding-bottom             :10px;
    
             overflow                   :auto;
             overflow-y                 :auto;                  /* code recognized by IE only */
             overflow-x                 :hidden;                /* code recognized by IE only */
    
             filter                     :chroma(color=#fffffe); /* code recognized by IE only */
             scrollbar-3dlight-color    :#fffffe;
             scrollbar-arrow-color      :#000000;
             scrollbar-base-color       :#ffffff;
             scrollbar-darkshadow-color :#fffffe;
             scrollbar-face-color       :#fffffe;
             scrollbar-highlight-color  :#000000;
             scrollbar-shadow-color     :#000000;
             scrollbar-track-color      :#fffffe;
    
             text-align                 :justify;
             font                       :10pt Verdana, Arial, Helvetica, sans-serif;
             color                      :#000080;}
    
    #FOOTER1 {width:750px; height:100px; left:0px; bottom:25px; z-index:2; background-color:#aaccee;}
    #FOOTER2 {width:750px; height:25px;  left:0px; bottom:0px;  z-index:4; background-color:#bbddff;}
    cheers, Jochem
    Last edited by jochem; 01-14-2005 at 10:17 PM.

  13. #13
    Join Date
    Feb 2004
    Posts
    310
    What you want to do cannot be done with CSS, with the exceptions of the Faux Columns hack. You need to use JavaScript:
    Code:
    <script type="text/javascript">
    <!--
    function getWindowHeight() {
    	var windowHeight = 0;
    	if (typeof(window.innerHeight) == 'number') {
    		windowHeight = window.innerHeight;
    	}
    	else {
    		if (document.documentElement && document.documentElement.clientHeight) {
    			windowHeight = document.documentElement.clientHeight;
    		}
    		else {
    			if (document.body && document.body.clientHeight) {
    				windowHeight = document.body.clientHeight;
    			}
    		}
    	}
    	return windowHeight;
    }
    
    function setFooter() {
    	if (document.getElementById) {
    		var windowHeight = getWindowHeight();
    		if (windowHeight > 0) {
    			var footerElement = document.getElementById('footer');
    			var footerHeight  = footerElement.offsetHeight;
    			var contentElement = document.getElementById('content');
    			contentElement.style.height = (windowHeight - footerHeight) + 'px';
    			footerElement.style.position = 'static';
    		}
    	}
    }
    		
    window.onload = function() { 
    	setFooter();
    }
    window.onresize = function() {
    	setFooter();
    }
    //-->
    </script>
    This code positions a footer at the bottom of the screen by calculating the height of the screen and footer, then doing the appropriate math. It's not exactly what you want, but you should be able to adapt it to your needs.

    The problem of course is that it is JavaScript. This won't work in all browsers, but most modern, and it won't work period if JavaScript is disabled.

  14. #14
    Join Date
    Nov 2003
    Location
    the Netherlands
    Posts
    304
    That's a real pitty Tonyh, I was hoping so much it could be done with pure CSS!
    I found two articles on the 'A List Apart' website, which confirm what you are saying: CSS footers and Faux columns.
    But would there be any other options than using JavaScript? Frames? NO!
    A table? No? I know they're not ment for this, but it would do the trick...
    How do search engines handle table content?

    cheers, Jochem
    Last edited by jochem; 01-15-2005 at 07:35 PM.

  15. #15
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    I was asked to answer this question through PM, but I have nothing to say. Based on what I've read, I can't see that what you want to do is possible without JavaScript. The DIVs only expand to the size of the content they contain, or stay at the width they are set to be at. There is nothing in CSS that allows you to change that, as far as I can see.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles