100% height

**cb3431** · Jul 10, 2008 16:00

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?

**webberoo** · Jul 10, 2008 22:24

Have you tried using position:fixed? Then aligning the div to the bottom of the view port.

**cb3431** · Jul 11, 2008 06:27

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>

User Tag List

Thread: 100% height

Thread Tools

Display

100% height

Bookmarks

Bookmarks

Posting Permissions