A fix to 100% height DIV, similar to table layout.

**Snecx** · Oct 2, 2004 09:39

I have a question here for those who know about CSS layouts very well. I've done some searches on the net and find that people still can't find a solution for a DIV that:

- stretch to 100% of the page height when the content height is less than 100%.
- expand to fit the contents when the contents height is more than 100% of the page.

This pretty much works the same as the old table layout. I just need to ask is there already a solution to this problem?

I ask this because I think I have found a solution, a working one tested under Mozilla Firefox 0.8-1.0, Opera 7.23, and IE 5.5/6.0; and it is purely CSS with no hacks and no Javascript.

**Paul O'B** · Oct 2, 2004 12:44

Hi,

I'm afraid this has been solved many times and you can see demos in my 3 col demo thread which has been up there about a year:

http://www.sitepoint.com/forums/showthread.php?t=143801

I have also set up a two threads in the FAQ that explain how to achieve 100% height and how to always keep a footer at the bottom of the page. I think mine was one of the first examples but there have been many since using things such as display:table for good browsers and just letting IE use height.

I know 2 or 3 different ways to achieve this reliably across browsers and I can even do you one for ie5 mac (although its a little convoluted).

However if your method is different to all the above methods then of course we would be pleased to see it as it may be a better solution

and I always like to see new methods as it keeps things fresh.

So if your code isn't a repeat of the techniques in the 3 col demo and FAQ's then post away

Paul

**Xerxos** · Oct 2, 2004 14:35

well there are quite a lot of solutions with known height of footer and i've recently created a solution for a footer of unknown height which I am going to post here soon, works in all browsers except for IE/Mac

if your solution doesn't work in IE5 then it is quite bad... cause quite a lot of people still use it, anyways just post it here

**Snecx** · Oct 2, 2004 22:20

Hi Paul O'B. I believe mine has a much simpler way but I do not know whether it works in the older versions of IE or not because I have limited browsers for testing purposes.

Here's the file: http://www.snecx.com/temp/height.html

CSS used are:

Code:

html, body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
}
html > body {
	overflow: visible;
}
body #layout {
	margin: 0 auto;
	padding: 0;
	height: 100%;
	min-height: 100%;
}
body > #layout {
	height: auto;
}

And the HTML should be as simple as:

Code:

<html>
<head> ... </head>
<body>
<div id="layout">
   contents...
</div>
</body>
</html>

I'm working on a way to make a 3 column stretch without using any background-image and without a footer, just 3 column stretch down to the page (seems quite impossible to me for now).

University is taking my time, lol.

Oh yeah, my layout just works to provide a single DIV that has effect similar to the follow:

Code:

<table height="100%">
    <tr>
    <td>contents</td>
  </tr>
</table>

**Paul O'B** · Oct 3, 2004 04:00

Hi,

lol - thats more or less the same as the layout in my demos - didn't you check the code?

.

All you need for 100% height is basically these three lines.

Code:

html, body{height:100%;} 
#outer{min-height:100%;}
* html #outer {height:100%;}

This will work in all the browsers listed on my demo.

However you need to add the following code to hide the first declaration for ie5 mac otherwise it chokes on the html,body {height:100%}. You also need to set the body margins and borders to zero otherwise they get added to the 100%. You don't need the overflow:visible and its best not to use the child selector as ie5 has problems with it and will read the last bit of the style.

Heres the revised code:

Code:

/* commented backslash mac hiding hack \*/ 
html, body{height:100%;} 
/* end hack */ 
html, body{margin:0;padding:0}
#outer{min-height:100%;}
* html #outer {height:100%;}

There are fixes in the demo for safari and I can even do a version for ie5mac if necessary.

http://www.pmob.co.uk/temp/mac3column.htm

I'm working on a way to make a 3 column stretch without using any background-image and without a footer, just 3 column stretch down to the page (seems quite impossible to me for now).

My demos do that already and only use a background image if you want another colour for the column. I do have a version which makes three equalising columns each with a different colour and no background images.

http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm

The example above isn't using the 100% height routines but could easily be added if necessary.

My methods aren't unique and there are other layouts about that use different methods (also see xerxos post above).

http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Hope that gives you something to work with

Paul

**Snecx** · Oct 3, 2004 05:24

Thanks for all the helps!

Sometimes it's just interesting to get some challenge.

I can see in the samples that you have to use different way to arrange the DIVs to make the 3 columns work. I guess this is the limitation that we have right now.

How if you are to change just the CSS for something like the codes below:

Code:

<body>
<div id="layout">
  <div id="menu">Supposed to have this as the left column</div>
  <div id="contents">Middle column</div>
  <div id="links">Some links and extra stuff, on the right column</div>
</div>
</body>

I want something more semantic. Hmm, looks like everyone tried and still there ain't any good solutions yet. LoL, sounds very impossible now.

I'll try and crack my head for this when I get the time, as how I've spend 3 weeks of my trimester break for a clone of Textile 2. Lucky enough I managed to code my own version that works as expected and fast enough for conversion on the fly (10x faster than any existing versions).

Hmm, a second thought, I might give up for this right now. LoL.

**Xerxos** · Oct 3, 2004 07:31

mine is coming soon

though it is quite messy too but the content goes in right order

and it doesn't work in IE/Mac

User Tag List

Thread: A fix to 100% height DIV, similar to table layout.

Thread Tools

Display

A fix to 100% height DIV, similar to table layout.

Bookmarks

Bookmarks

Posting Permissions