Vertical DIV to stretch to full page

Lithium · September 5, 2011

Does anyone know a way that i can use the code below to make middle div's stretch vertically up to page full height, making footer to be on the very bottom (without scrolling the browser window) of the page?

<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Untitled Document</title>
<style>
           body {
           margin: 0px;
           padding: 0px;
   		background-color:#000000;
   		background-image:url(images/bg.jpg);
   		background-attachment:fixed;
   		background-repeat:repeat-x
           }
           #header {
           background: #438a48;
           width: 1000px;
		margin:auto;
    height:50px;
           }
           #leftcolumn {
           background: #267;
           float: left;
           width: 200px;
           height: 500px;
           }

           #top_center {
           background: #222;
           float: left;
           width: 100%;
           height: 50px;
           }
           #content
		{
           background: #fff;	
           clear: both;
           width: 600px;
		height: 450%;
		overflow-y: scroll;
           }
		#container {
           width: 1000px;
		margin:auto;
		}
		#center{
			float: left;
           background: red;
           height: 200px;
           width: 600px;
		height:500px;
           }
          #rightcolumn {
           background: blue;
           float: right;
           width: 200px;
           height: 500px;
           }
           #footer {
           background: #df781c;
           clear: both;
           width: 1000px;
		margin:auto;
    	height:50px;
		text-align:center;
           }

</style>
   <head>
   </head>
   <body>
    <div id="header">Header</div>
<div id="container">
    <div id="leftcolumn">leftcolumn</div>
    <div id="center">

    <div id="top_center">top_center</div>
    <div id="content">
    content
    </div>
   </div>
    <div id="rightcolumn">rightcolumnr</div>
    </div>
    <div id="footer">Footer</div>
   </body>
   </html>

Pyromann · September 5, 2011

try to use height: x %;

change the x value to fit your requirements ..

tell me if it worked ... i'm not sure about

Lithium · September 5, 2011

it doesn't... already had tried it :|

runthis · September 5, 2011

i noticed that height 100% sucks and doesnt do it what it should, however if you wanted to you could do this

<table>

<tr><td>FIRST DIV</td></tr>

<tr><td>MIDDLE DIV</td></tr>

</table>

and set height attributes in the <td>'s making sure they equal 100% taking into account any padding or margining you might add.

Lithium · September 5, 2011

i noticed that height 100% sucks and doesnt do it what it should, however if you wanted to you could do this
<table>

<tr><td>FIRST DIV</td></tr>

<tr><td>MIDDLE DIV</td></tr>

<tr><td>LAST DIV</td></tr>

</table>

and set height attributes in the <td>'s making sure they equal 100% taking into account any padding or margining you might add.

I could but the goal here is not using <table> ;)

Pyromann · September 5, 2011

did u try that height here ?

#container {

width: 1000px;

margin:auto;

}

and you should delete that 450% height from the content style i think

#content

{

background: #fff;

clear: both;

width: 600px;

height: 450%;

overflow-y: scroll;

}

Edited September 5, 2011 by Pyromann

Dayo · September 5, 2011

try this

<!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>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Untitled Document</title>
<style>
           body, html {
           margin: 0px;
           padding: 0px;
           background-color:#000000;
           background-image:url(images/bg.jpg);
           background-attachment:fixed;
           background-repeat:repeat-x;
		height:100%;
           }
           #header {
           background: #438a48;
           width: 1000px;
           margin:auto;
		height:5%;
           }
           #leftcolumn {
           background: #267;
           float: left;
           width: 200px;
		height:100%;
           }

           #top_center {
           background: #222;
           float: left;
           width: 100%;
           height: 5%;
           }
           #content
           {
           background: #fff;  
           clear: both;
           width: 600px;
           overflow-y: scroll;
           height: 95%;
           }
           #container {
           width: 1000px;
           height: 90%;
           margin:auto;
           }
           #center{
           float: left;
           background: red;
           height: 200px;
           width: 600px;
		height:100%;
           }
          #rightcolumn {
           background: blue;
           float: right;
           width: 200px;
		height:100%;
           }
           #footer {
           background: #df781c;
           clear: both;
           width: 1000px;
           margin:auto;
           height:5%;
           text-align:center;
           }

</style>
   <head>
   </head>
   <body>
    <div id="header">Header</div>
<div id="container">
    <div id="leftcolumn">leftcolumn</div>
    <div id="center">

    <div id="top_center">top_center</div>
    <div id="content">
    content
    </div>
   </div>
    <div id="rightcolumn">rightcolumnr</div>
    </div>
    <div id="footer">Footer</div>
   </body>
   </html>

Lithium · September 5, 2011

try this

Brilliant! :D thx much. Works perfectly :)

Pyromann · September 5, 2011

it seems that i was quite wright about this situation...

glad we could help :D

Dayo · September 6, 2011

but you forgot to add

body, html {
height:100%;
}

;)

Sign In

Vertical DIV to stretch to full page

Recommended Posts

Lithium

Link to comment

Share on other sites

Pyromann

Link to comment

Share on other sites

Lithium

Link to comment

Share on other sites

runthis

Link to comment

Share on other sites

Lithium

Link to comment

Share on other sites

Pyromann

Link to comment

Share on other sites

Dayo

Link to comment

Share on other sites

Lithium

Link to comment

Share on other sites

Pyromann

Link to comment

Share on other sites

Dayo

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Hosting

Marketplace