SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: 100% height

  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height

    I have been struggling with this for a few days and I am not making any progress. I am trying to get it so the bottomNav is always at the bottom of the rightCol. If the rightCol needs more space then I want it to scroll. If the user changes the size of their browser then I want it to cause the rightCol to scroll if it means pushing bottomNav down. In other words I want bottomNav to always be present regardless of the size of the screen. When I put a height of 100% on both of the columns then they extend beyond the bottom of the screen.
    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></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    html, body {height:100%}
    body {
    	padding: 0;
    	margin: 0;
    	color: #000000;
    }
    #container
    {
    	height: 100%;
        margin-bottom: -30px;	
    	min-height: 100%;
    	width: 1004px;
    }
    #header
    {
    	background-color: Gray;
    	float: left;
    	height: 100px;
    	width: 100%
    }
    #topNav
    {
    	background-color: Aqua;
    	float: left;
    	height: 50px;
    	width: 100%;
    }
    #leftCol
    {
    	background-color: White;
    	border: solid 1px silver;
    	float: left;
    	height: 100%;
    	margin-right: 5px;
    	width: 200px;
    }
    #rightCol
    {
    	background-color: White;
    	border: solid 1px silver;
    	border-bottom: none;
    	float: left;
    	height: 100%;
    	width: 795px;
    }
    #bottomNav
    {
    	border: solid 1px silver;
    	height: 30px;
    	margin: -30px auto 0 205px;
    	width: 795px;
    }
    
    </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                Header
            </div>
            <div id="topNav">
                Top Nav
            </div>
            <div id="leftCol">
                Left Col
            </div>
            <div id="rightCol">
                Right Col           
            </div>
        </div>
        <div id="bottomNav">
            Bottom Nav
        </div>
    </body>
    </html>
    Can this be done with CSS? I know floating the footer at the bottom can be done, but is it possible to ensure that bottomNav is always at the bottom of the viewable area without having to scroll the entire page?

  2. #2
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried using position:fixed? Then aligning the div to the bottom of the view port.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Things are now in the right places, but I can't get the rightCol and leftCol to be 100%. They are 100% plus the space for the header and topNav in IE6.

    I tried repeating an image down the y axis and that didn't do anything.

    Thanks for the tip to set the position of the bottomNav to fixed.

    I attached an image of what I am trying to do.

    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 id="Head1" runat="server">
        <title>Untitled Page</title>
        <style type="text/css">
    /* commented backslash hack \*/ 
    html, body{height:100%;} 
    /* end hack */
    html,body {margin:0;padding:0}
    #container
    {
    	min-height: 100%;
    	background-color: Olive;
    	width: 1004px;
    }
    * html #container{height:100%;}/* ie6 and under*/
    
    #leftCol
    {
    	border: solid 1px silver;
    	float: left;
    	height: 100%;
    	margin-right: 5px;
    	width: 200px;
    }
    #rightCol
    {
    	border: solid 1px silver;
    	float: left;
    	height: 100%;
    	width: 795px;
    }
    #bottomNav
    {
    	border-top: solid 1px silver;
    	bottom: 0px;
    	height: 30px;
    	/* IE 6 hack*/
    	position: absolute;
    	width: 795px;
    }
    /*For IE 7 and Firefox*/
    body>div#bottomNav {position: fixed}
       
        </style>
    </head>
    <body>
        <div id="container">
            <form id="form1" runat="server">
            <asp:ScriptManager ID="SC" runat="server" />
                <div style="float: left; height: 100px; width: 100%; background-color: Lime;">
                    Top Nav
                </div>
                <div style="float: left; width: 100%; background-color: Fuchsia;">
                    Title Bar
                </div>
                <div id="leftCol">
                    Left Col
                </div>
                <div id="rightCol">
                    Right Col
                    <br style="clear: both;" />
                    <div id="bottomNav">
                        Bottom Nav
                    </div>                        
                </div>                  
            </form>
        </div>
      
    </body>
    </html>
    Attached Images Attached Images
    Last edited by cb3431; Jul 11, 2008 at 07:51.


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
  •