Could this be a new wrinkle on the "100% height not working" front?

Hi there CSS wizards!

This is a weird one. Really!

I've added a red outline to my HTML tag to better see what's going on, and what's happening is:

- At a browser-window height where all content is visible, all is well. Red line indicates "HTML" goes right to the bottom. Background tree goes right to the bottom. There is a scrollbar that doesn't "quite" disappear, but that's OK (though perhaps a clue to what's wrong in the next step?)

- If I shorten the browser window enough that i have to scroll down to see the lower half, when i reach the bottom, the background tree is cut off. The shorter I make the window, the more pronounced the effect. The red line seems to indicate the "HTML" element is getting shorter, but the DIV containing the background tree seems the only thing affected.

I ran the page through validation, and the only errors related to items that seem unrelated. And none of the standard DOCTYPES seem to have any effect.

Here's the page HTML:

How-To 100% height

Is the 100% height manual in the How-To section still up-to-date in regards to browser compatibility? Or are there maybe recommendable options?

Help Me in understanding Height funtionality in CSS

Well Hello Guys,
I just Started Exploring CSS .I'm Currently Confused in certain aspect of CSS so it would be of great if some one can sort this out

What is difference if height-property is set to 100% and height-property set to max screen resolution using "pixel"

Cuz i have seen the later one cover the whole screen using web-inspector but the earlier one not

Does the % height actual expand only if container content grows

Viren Negi

Lines 100% height over browser


I'm building a website and i would like 2 lines over 100% browser height.
I don't know how to do it, because the lines are for a div which is inside another div. I can set the first div to 100% height, but not the second.
The website is on:

Second question:
when i embed a swf file in the html code, a border appears when i click on a photo. How can I remove this border in het css or html code?

Kind regards;

Yet another height: 100% question

I skimmed through the old 100% questions and most of them involve multiple columns. Mine is much simpler (I think). Basic layout: header, main, footer. Header and footer have fixed height. All 3 should fit in the window without a scrollbar unless the content of main expands past min-height: 100%. Working on this for way too long, tried tons of tutorials, heres my code:

The .html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<head><title>CSS 100% Height</title>

Syndicate content