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.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    100% height in CSS, doing more than 100%?!?

    Hi again guys,

    i have almost finished my layout in CSS and i just need it to fill 100% height, i have done this but the page takes up more than 100% for some reasion in both FF and IE6 and causes the page to scroll, look here:

    CLICKY!!

    Here is the code:

    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="navbar"></div>
    
    <div id="header_image"></div>
    
    <div id="latest_news"></div>
    
    <!-- start 3 columns -->
    
    <div id="news_container">
     
    <div id="news_left"></div>
    
    <div id="news_center"></div>
    
    <div id="news_right"></div>
    
    </div> <!-- news container -->
    <div id="services_container">
    
    <div id="services_left"> </div>
    
    <div id="pilar"><br />
    
    	<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>
    
    <div id="services_center"> </div>
    
    <div id="pilar"><br />
     
    	<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>
        
    <div id="services_right"> </div>
    
    </div> <!-- services container -->
    
    <div id="content">miain, this should strech 100% height</div>
    
    
    <div id="footer">footer</div>
    
    
    
    </div>
    
    </body>
    </html>
    CSS:

    Code:
    body {
    text-align: center; /* center's things in pre IE6 */
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(images/background.jpg);
    background-repeat: repeat-x;
    background-color: #545454;
    }
    
    html,body {
          height:100%;
    }
    
    #container {
    margin: 0 auto;
    width: 556px;
    min-height: 100%;
    height: 100%;
    text-align: left;
    background-color: #CCCCCC;
    padding: 0px;
    }
    
    #navbar {
    width: auto;
    height: 62px;
    }
    
    #header_image {
    width: auto;
    background-color: #009999;
    height: 149px;
    }
    
    #latest_news {
    width: auto;
    background-color: #009999;
    height: 35px;
    min-height: 35px;
    }
    
    #news_container {
    width: 556px;
    height: 49px;
    min-height: 49px;
    overflow: hidden;
    }
    
    #news_left {
    float: left;
    width: 23px;
    height: auto;
    background-color: #000099;
    min-height: 80px;
    overflow: hidden;
    }
    
    #news_center {
    float: left;
    width: 512px;
    height: auto;
    background-color: #333333;
    min-height: 80px;
    }
    
    #news_right {
    float: right;
    width: 21px;
    height: auto;
    background-color: #000099;
    min-height: 80px;
    overflow: hidden;
    }
    
    #news_bottom {
    width: 556px;
    background-color: #009999;
    height: 7px;
    min-height: 7px;
    }
    
    #services_container {
    width: 556px;
    height: 111px;
    min-height: 111px;
    background-color: #FFFFFF;
    }
    
    #services_left {
    float: left;
    width: 166px;
    height: 111px;
    min-height: 111px;
    overflow: hidden;
    }
    
    #services_center {
    float: left;
    width: 166px;
    height: 111px;
    min-height: 111px;
    }
    
    #pilar {
    float: left;
    width: 28px;
    height: 111px;
    min-height: 111px;
    background-color: #FFFFFF;
    vertical-align: bottom;
    }
    
    #services_right {
    float: right;
    width: 166px;
    height: 111px;
    min-height: 111px;
    overflow: hidden;
    }
    
    #content_container {
    background-color: #CCCCCC;
    height: 100%;
    min-height: 100%;
    width: 556px;
    }
    
    #content {
    clear: both;
    background-color: #336666;
    height: 100%;
    min-height: 100%;
    width: 556px;
    overflow: auto;
    }
    
    #footer {
    clear: both;
    background-color: #333333;
    min-height: 35px;
    width: 556px;
    }
    Any ideas guys? cheers,

    Edd

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    that page is doing exactly what u want it to do, that area is exactly 100% the height of the browser window. if u want the hole page to be 100% height try having the container be 100% height, not just the internal part.

    hope thats helpfull

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    hmm but i already have them set to 100%

    Both #container & #content.

    It works if i only set the container to 100% but i need also #content to fill the gap between the header and footer.

  • #4
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    hmm but i already have them set to 100%

    Both #container & #content.
    That's 100 % each of the height of the body and the container, so 200%. The height ids the height of the viewport (display). I'd suggest you remove one of them. Not sure which one, though...

  • #5
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks for you reply, i have done as u said and taken the #content out of the container so its not on its own and set's it height to 100% and i still have the same problem, its stretching way to much still.

    CLICKY!!!!

    heres the updated code:

    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>testing</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css">
    
    </head>
    
    <body>
    
    <div id="container">
    
    <div id="navbar"></div>
    
    <div id="header_image"></div>
    
    <div id="latest_news"></div>
    
    <!-- start 3 columns -->
    
    <div id="news_container">
     
    <div id="news_left"></div>
    
    <div id="news_center"></div>
    
    <div id="news_right"></div>
    
    </div> <!-- news container -->
    <div id="services_container">
    
    <div id="services_left"> </div>
    
    <div id="pilar"><br />
    
    	<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>
    
    <div id="services_center"> </div>
    
    <div id="pilar"><br />
     
    	<img src="images/layout_r7_c6.jpg" width="28" height="81" /></div>
        
    <div id="services_right"> </div>
    
    </div> <!-- services container -->
    
    </div>
    
    <div id="content">main, this should stretch 100% height</div>
    
    <div id="footer">footer</div>
    
    
    
    </body>
    </html>
    CSS:

    Code:
    body {
    text-align: center; /* center's things in pre IE6 */
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(images/background.jpg);
    background-repeat: repeat-x;
    background-color: #545454;
    }
    
    html,body {
          height:100%;
    }
    
    #container {
    margin: 0 auto;
    width: 556px;
    height: auto;
    text-align: left;
    background-color: #CCCCCC;
    padding: 0px;
    }
    
    #navbar {
    width: auto;
    height: 62px;
    }
    
    #header_image {
    width: auto;
    background-color: #009999;
    height: 149px;
    }
    
    #latest_news {
    width: auto;
    background-color: #009999;
    height: 35px;
    min-height: 35px;
    }
    
    #news_container {
    width: 556px;
    height: 49px;
    min-height: 49px;
    overflow: hidden;
    }
    
    #news_left {
    float: left;
    width: 23px;
    height: auto;
    background-color: #000099;
    min-height: 80px;
    overflow: hidden;
    }
    
    #news_center {
    float: left;
    width: 512px;
    height: auto;
    background-color: #333333;
    min-height: 80px;
    }
    
    #news_right {
    float: right;
    width: 21px;
    height: auto;
    background-color: #000099;
    min-height: 80px;
    overflow: hidden;
    }
    
    #news_bottom {
    width: 556px;
    background-color: #009999;
    height: 7px;
    min-height: 7px;
    }
    
    #services_container {
    width: 556px;
    height: 111px;
    min-height: 111px;
    background-color: #FFFFFF;
    }
    
    #services_left {
    float: left;
    width: 166px;
    height: 111px;
    min-height: 111px;
    overflow: hidden;
    }
    
    #services_center {
    float: left;
    width: 166px;
    height: 111px;
    min-height: 111px;
    }
    
    #pilar {
    float: left;
    width: 28px;
    height: 111px;
    min-height: 111px;
    background-color: #FFFFFF;
    vertical-align: bottom;
    }
    
    #services_right {
    float: right;
    width: 166px;
    height: 111px;
    min-height: 111px;
    overflow: hidden;
    }
    
    #content {
    margin: 0 auto;
    background-color: #336666;
    height: 100%;
    min-height: 100%;
    width: 556px;
    overflow: auto;
    }
    
    #footer {
    clear: both;
    margin: 0 auto;
    background-color: #333333;
    min-height: 35px;
    width: 556px;
    }
    Cheers guys

  • #6
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    try this:
    Code:
    #content {
    margin: 0 auto;
    background-color: #336666;
    width: 556px;
    overflow: auto;
    }
    Remove the Min-height which seemed to be causing the extra height. And now the page is 100% height for the container (plus the footer which is outside of the container).

    If this isn't what you want/need, reassess the thread, because I am becoming confused. Your first code did exactly what you told it to, and then I think you changed your mind, or I didn't have a full grasp of what you wanted, but you complained about the content stretching too far, so here is the solution to date.

    Post back telling us if this fixes it for you. Remembering that this content div will stretch as you add information.
    *edit*
    Just noticed that the content div is *outside* the container. Did you want the content div to be inside the container div and stretch to a fixed footer at the bottom of the page? that would need a different bit of code... post back here, please, if this is what you want. thanks.
    Last edited by jlhaslip; 09-13-2007 at 01:59 AM.

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    here is the solution I alluded to for the sticky footer

    http://ryanfait.com/sticky-footer/

  • #8
    New Coder
    Join Date
    Sep 2007
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jlhaslip View Post
    try this:
    Just noticed that the content div is *outside* the container. Did you want the content div to be inside the container div and stretch to a fixed footer at the bottom of the page? that would need a different bit of code...
    thats what i originally wanted yes and that would be best, any ideas on how to do this?

    I could not get your above method to work with the #content which is currently outside of the container

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    it's still doing what your telling it to do. the #content is being 100% of the viewport, so in my case it's 650px high, which is not what you want.

    may I suggest a method like this:

    http://www.themaninblue.com/writing/...ve/2005/08/29/
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    well heres what i came up with, u can modify it to suit ur needs, hope this is what u need

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
    	body { margin:0; text-align:center;}
    
    	#container { width:650px; margin:0 auto; height:100%; background:red;}
    
    	#header { width:650px; height:100px; background:blue; }
    
    	#nav { width:650px; height:100px; background:green; }
    
    	#whatever { width:650px; height:100px; background:#333;}
    
    	#whatever2 { width:650px; height:100px; background:#999;}
    
    	#footer { width:650px; height:100px; background:#006; position:absolute; bottom:0; }
      </style>
     </HEAD>
     <BODY>
    	<div id="container">
    		<div id="header"></div>
    		<div id="nav"></div>
    		<div id="whatever"></div>
    		<div id="whatever2"></div>
    
    
    		<div id="footer"></div>
    	</div>
     </BODY>
    </HTML>

  • #11
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    for some reason editing my posts doesnt work so here is the same code with an IE fix

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <style type="text/css">
    	body { margin:0; text-align:center;}
    
    	#container { width:650px; margin:0 auto; height:100%; background:red; position:relative; text-align:left; }
    	#container p { margin:10px; }
    
    	#header { width:650px; height:100px; background:blue; }
    
    	#nav { width:650px; height:100px; background:green; }
    
    	#whatever { width:650px; height:100px; background:#333;}
    
    	#whatever2 { width:650px; height:100px; background:#999;}
    
    	#footer { width:650px; height:100px; background:#006; margin:0 auto; position:absolute; bottom:0; right:0;}
      </style>
     </HEAD>
     <BODY>
    	<div id="container">
    		<div id="header"></div>
    		<div id="nav"></div>
    		<div id="whatever"></div>
    		<div id="whatever2"></div>
    		<p>kjfg klklahgflaks dflaol</p>
    
    		<div id="footer"></div>
    	</div>
     </BODY>
    </HTML>


  •  

    Posting Permissions

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