Comments on: 100% Height Layout Using CSS

By: Dave Woods

Dave Woods — Tue, 27 Jul 2010 10:27:14 +0000

@Darell – You’d probably be better off using something like this solution…
http://www.dave-woods.co.uk/index.php/css-faux-columns/

By: darell

darell — Tue, 27 Jul 2010 10:23:42 +0000

any solution for this? i want to have a 100% height if the contents is too short. fit in browser view area. no scrollbar. hoping to get solution for this. thank you in advance!

TEST

html, body {
height: 100%;
}

#wrapper {
background-color: #C90;
height: 100%;
}

#header {
background-color: #F00;
height: 200px;
}

#contents {
background-color: #09F;
height: 100%;
}

#footer {
background-color: #006;
height: 50px;
}

header
contents
footer

By: ali

ali — Thu, 08 Jul 2010 08:40:12 +0000

thank you very much for that helpfull tutorial.

By: 47 CSS Tips & Tricks To Take Your Site To The Next Level « Tech-Creative Blog

Tue, 04 May 2010 04:49:34 +0000

[...] 100% height is one of those things CSS doesn’t do so easily. When you specify an element to have a height of 100%, the 100% refers to the containing element’s height. The containing element would then need to be 100% the height of its containing element and so on. The trick is to set the height of the outermost elements to be 100% view plaincopy to clipboardprint? [...]

By: Dave Woods

Dave Woods — Wed, 21 Apr 2010 14:41:40 +0000

MaraXus, please email me http://www.dave-woods.co.uk/index.php/contact/ as I can’t see anything wrong with the page you sent over.

By: MaraXus

MaraXus — Wed, 21 Apr 2010 14:22:12 +0000

Hmm, something is wrong, now it ends when the text ends, what i’m doing wrong?

http//www.bunker.pl/dostep/

By: MaraXus

MaraXus — Wed, 21 Apr 2010 13:11:43 +0000

Thank you, it’s working very good

By: Dave Woods

Dave Woods — Wed, 21 Apr 2010 12:21:29 +0000

Hi MaraXus, for something like that you’re best to use this method…

http://www.dave-woods.co.uk/index.php/css-faux-columns/

By: MaraXus

MaraXus — Wed, 21 Apr 2010 11:42:33 +0000

I have a problem with this:
#pasek_lewo {
margin-left: 20px;
height: 100%;
width: 280px;
background-image: url(../images/tlo_left_dwn.jpg);
background-repeat: repeat-y;
position: absolute;
}
When the text is long and there is a scrollbar, this div ends to early.
Here is the page: http://www.bunker.pl/dostep/

Sorry for my english, i hope you’ll understand what i mean

By: Dave Woods

Dave Woods — Sun, 18 Apr 2010 20:46:02 +0000

Hi Isaac, No problem… unfortunately that’s not really how CSS works and there is no easy way to get equal column height (without using tables) that is supported in all browsers at the moment.

The closest thing we’ve got at the moment is the display: table; values but even then older versions of IE will cause problems so the only solution that works in all browser including IE6 is faux columns at the moment.

CSS3 will obviously make this much easier once IE has caught up.

Not problem with helping out. If it was something that took up a lot of my time then I’d usually take it on as paid work but to simply point you in the direction of one of my other articles in no trouble at all