Results 1 to 8 of 8

Thread: 100% height for div containers?

  1. #1
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default 100% height for div containers?

    I am trying to get the height of my main content container reach all the way to the bottom of the page, regardless of the visitors screen size and resolution.

    Here's the CSS code:

    Code:
    #maincontent {
    	width:960px;
    	height:100%;
    	border-right: 10px solid #561414;
    	border-left: 10px solid #561414;
    	background: #FFFFFF;
    	margin: 0px auto;
    }
    Nothing I do seems to work?


    Cheers,
    Bassa

  2. #2
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    You have to set the height of all the parent elements of #maincontent for 100% height to register. Otherwise, browsers can't read what height you want #maincontent to be 100% of.

  3. #3
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Yeah, but check these out...

    Div Container here:
    Code:
    <div id="main">Content for  id "main" Goes Here</div>
    CSS for Div Container:
    Code:
    #main {
    	width:960px;
    	height:100%;
    	border-right: 10px solid #561414;
    	border-left: 10px solid #561414;
    	background: #FFFFFF;
    	margin: 0px auto;
    }
    "margin: 0px auto;" is used to center the Div Container in the Body of the HTML page.

    And the Body in the CSS looks like this:
    Code:
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background: #FFFFFF url(../images/bg_tile.gif);
    	font-family: Verdana;
    	text-decoration: none;
    	font-size: 16px;
    	text-align: center; /* For IE */
    }
    This should work. But when I test this in IE, it only shows a 10px container at the top of the window.

    What gives?

  4. #4
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Oh, and for the record, I have removed parent containers, so the #main container shown above is alone in the HTML markup.

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,859
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

    Default

    Code:
    body {
    position:absolute;margin-top:0;height:100%
    } 
    #maincontent {
    	width:960px;
    	height:100%;
    	border-right: 10px solid #561414;
    	border-left: 10px solid #561414;
    	background: #FFFFFF;
    	margin: 0px auto;
    }
    Arie Molendijk

  6. #6
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks man!

  7. #7
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by molendijk View Post
    Code:
    body {
    position:absolute;margin-top:0;height:100%
    } 
    #maincontent {
    	width:960px;
    	height:100%;
    	border-right: 10px solid #561414;
    	border-left: 10px solid #561414;
    	background: #FFFFFF;
    	margin: 0px auto;
    }
    There is no purpose in the position:absolute; In fact, it'll cause you troubles in some instances. The real solution is in the height:100%.

    Like I said, you need height:100% defined on ALL parent elements. This includes <body> and <html>.

  8. #8
    Join Date
    Apr 2008
    Posts
    109
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Getting a little closer. The containers are looking good, although my text container seems to span the height alot, so that even on my high 1920x1200 resolution, I have to scroll down to see the footer.

    Below the big image, the main content of all seperate pages begin. Looks like this:

    HTML:
    Code:
    <div id="maincontent">
    CSS:
    Code:
    #maincontent {
    	width:960px;
    	border-right: 10px solid #561414;
    	border-left: 10px solid #561414;
    	margin: 0px auto;
    	background: #FFFFFF;
    	height: 100%;
    }
    Should go just to the bottom, but it seems to expand the page way below the bottom.

    Is that because of the attribute we changed in the Body?

    Link: http://www.froso.dk/test/index2.html

Bookmarks

Posting Permissions

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