100% height

RZX Developer · #1 (**permalink**) Mar 28th, 2008, 09:02

Hey all,

I am currently messing about with css height att and I am doing a 2 column layout and want both columns to be 100% height within the browser but all I am getting is the height of the content.

Could you please look at my code and let me know what I am doing wrong.

At this moment in time my page is not live.

Code: Select all

<!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" xml:lang="en" lang="en"> 
    <head>

        <title>test</title>

        <style>

body{        
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px auto;
    padding: 0px;
    color: #000000;
    background: #ffffff;
}

#body {
    width: 1500px;
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    background: #232323;
}

#left {
    width: 450px;
    height: 100%;
    background: #ff0000;
}

#right {
    width: 1050px;
    height: 100%;
}

        </style>

    </head>

<body>

    <div id="body">

        <div id="left">
        &nbsp;
        </div>

        <div id="right">
        &nbsp;
        </div>
        
    </div>

</body>
</html>

Wayne

Ed · #2 (**permalink**) Mar 28th, 2008, 09:17

Could we have a link? I can't see why it would not be working Wayne. Also, you might like to try the property min-height as setting a definite height on columns could cause a lot of restrictions and limit content levels.

Ed.

RZX Developer · #3 (**permalink**) Mar 28th, 2008, 09:48

There is no link available as I don't currently have my domain details with me and I am working on a work pc. I have just tried the min-height: 100% and still no luck.

Aso · #4 (**permalink**) Mar 28th, 2008, 11:05

You most likely need;

Code: Select all

body {
height: 100%;
}

Otherwise, browsers set the <body> height to auto, so the <div>'s only expand what's needed.

Note: If the above does not work, try adding html to the same declaration.

UUDDLRLRBA · #5 (**permalink**) Mar 28th, 2008, 12:37

I believe I'm having the same issue. Adding height:100% to the body didn't fix it, nor did min height.

My site's layout is liquid so I'm wanting the right colum to adjust with the amount of content in the mainContent area so it always reaches the footer.

I can set it to a specific static hight with height: ## px: and it does change but isn't giving the desired effect.

I tried giving the right column the property height:100% but that didnt' do it.

Here's the site

http://www.hspfan.com/index.htm

Here's the css

http://www.hspfan.com/hspstyle1.css

I'm guessing it has to do with another property not allowing the column to use the height 100% property.

Maybe I'm way off.

Any ideas? It seems we're having the same problem.

RZX Developer · #6 (**permalink**) Mar 28th, 2008, 13:09

I have looked google and all I am getting back in the height/min-height but like yourself it is not working, if I find the solution I'll post it.

UUDDLRLRBA · #7 (**permalink**) Mar 28th, 2008, 18:06

I'm going to try n rebuild the layout using this template.

http://matthewjamestaylor.com/blog/u...enu-pixels.htm

frinkky · #8 (**permalink**) Mar 28th, 2008, 19:41

Try

Code: Select all

html, body {
height:100%;
}

IE 6 doesn't tend to need the html element to be set 100% but including it won't hurt.

UUDDLRLRBA · #9 (**permalink**) Mar 28th, 2008, 21:59

I'll try in when I get home.

UUDDLRLRBA · #10 (**permalink**) Mar 29th, 2008, 08:02

That had some pretty bad effects on the site. Everything went center and the container disappeared.

Strange

UUDDLRLRBA · #11 (**permalink**) Mar 29th, 2008, 09:02

What it appears to be is there's no way to have a liquid table with a column that will always reach the bottom, unless the column is full and is also liquid. Wish there was a way to accomplish this but it looks like I'm going to have to go static.....now comes the choice to optimize for 800 or 1024.

frinkky · #12 (**permalink**) Mar 29th, 2008, 10:23

Try this

Code: Select all

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="wrapper">

        <div id="left">
        Left
        </div>

        <div id="right">
        Right
        </div>
        <div id="clearfloats"></div>
    </div>

</body>
</html>

Code: Select all

html, body {
margin:0;
padding:0;
height:100%;
}

body{        
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background: #ffffff;
}

#wrapper {
    width: 100%;
    height: 100%;
    background: #232323;
}

#left {
    width: 30%;
    height: 100%;
    float:left;
    background: #ff0000;
}

#right {
    width: 70%;
    height: 100%;
    float:right;
    background:#0000ff;
}

#clearfloats {
clear:both;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Div height problem	dryjoy	Web Page Design	1	Jan 6th, 2008 18:05
How to make a table height equal to the browser height ?	subhadip	Starting Out	4	Sep 20th, 2007 07:56
CSS #frame height and PHP	SCDWB	Web Page Design	6	May 12th, 2007 22:45
100% div height	jimz	JavaScript Forum	2	Mar 22nd, 2006 00:53

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
100% height