Comments on: Quick Tip: CSS 100% Height

By: Gavski

Gavski — Wed, 10 Mar 2010 17:31:31 +0000

Man, my head was aching trying to solve this one. Thanks to you, problem solved.

Cheers

By: links for 2010-03-09 » 4exp.net

links for 2010-03-09 » 4exp.net — Tue, 09 Mar 2010 17:11:48 +0000

[...] CSS 100% Height | TutWow (tags: css webdesign tutorial html tips) [...]

By: sam

sam — Mon, 08 Mar 2010 04:31:09 +0000

thank for the tip. I tried the code on several different browsers all with beautiful results.

By: 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms) « WebGlide - UX

Thu, 04 Mar 2010 06:12:41 +0000

[...] items to flip between sizes. You will see that an area’s scroll depends on the configuration.CSS 100% HeightA common problem among designers is how to get a div to stretch 100% of the window’s height. There [...]

By: JR Prospal

JR Prospal — Wed, 03 Mar 2010 06:02:40 +0000

Michael, that worked for a layout I was testing on. Very nice.

By: Michael Kozakewich

Michael Kozakewich — Wed, 03 Mar 2010 05:43:11 +0000

This doesn’t work in Chrome. It’s fine if the content fills the screen, but falls short of 100% if it doesn’t.

html { height:100%; }
body { min-height:100%; }
#content { min-height:100%; }

That works, with the caveat that ‘html’ doesn’t go past 100%. Really, you shouldn’t even be using ‘html’ for backgrounds or borders, so it shouldn’t matter. Make ‘body’ the main background, and go for ‘#container’ elements if you need more.

No min-height on ‘html’, but there is a min-height on ‘body’ and the content area. This is because the height of the ‘html’ element is not the same as the (other kind of) height of the ‘html’ element. The border/background would only go to 100%, but the page itself will still grow (so elements inside will grow higher). A bit inconsistent, but I assume it’s part of the spec (as both Webkit and Opera do it).

By: Esta semana en Twitter: 27-02-2010 | ceslava - Diseño y Formación

Esta semana en Twitter: 27-02-2010 | ceslava - Diseño y Formación — Sat, 27 Feb 2010 20:08:40 +0000

[...] http://www.tutwow.com/tips/quick-tip-css-100-height/ # [...]

By: Kflap

Kflap — Thu, 25 Feb 2010 22:50:21 +0000

this stretched to the bottom but not to the top

By: Chris Sargeant

Chris Sargeant — Wed, 24 Feb 2010 22:10:11 +0000

If you pull the css right from the example html you will find that it is different from the posted css information on this page…

Not sure why that is

By: Chris Sargeant

Chris Sargeant — Wed, 24 Feb 2010 22:05:17 +0000

The example is wrong

its close but not quite there

Make sure that html is specified as height: 100%; as well
NOT min-height

The only div that should be specified as “min-height: 100%;” is the div you want to expand the full height of the browser window. If you only specify it as “height: 100%;” when your page scrolls down the bg colour or image will be cut off.

@charset “utf-8″;
/* CSS Document */

html {
height: 100%;
}

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

#content {
background: #EEE;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 0 20px 0 20px;
margin: auto;
font: 1.5em arial, verdana, sans-serif;
width: 960px;
min-height: 100%;