Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Div Height 100%

common question i know - can't find a solution though

1:35 pm on Oct 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 25, 2003
posts: 664
votes: 0

Hey everyone,

I'm having some trouble with a CSS design I'm working on. I created a page that has a header and footer but between them is a two column layout. The left side is 200px wide and is a sidebar navigation. It is working fine.

Basically my problem is with the right side of the layout. If the left side is longer than the right side, the right side doesn't stretch to match the left side. The left side will stretch to match the right side which is great. It is just the right side I'm having trouble with.

If only height: 100% would work, it would stretch the div to match up with the left side. This doesn't work though. I tried doing some searching on webmasterworld and google for a solution. I tried changing the body to be 100% along with the div container but this just stretches everything too far down the page, causing a lot of empty space and a lot of scrolling.

Does anyone know a fix for this? It should be simple to just have a div stretch to have the same height as the container it is in, but I just can't get it to work.

Can anyone help?

Thanks in advance for your help! :)


2:20 am on Oct 6, 2007 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 4, 2001
posts: 2173
votes: 13

This is a common problem and making the height: 100% does not always work. Possibly the only solution is a "faux column". Search either WebmasterWorld or the net.