height: 100%

[shadowayex]

Alright. On the website I just started making, the layout has a black background, and then a div that holds all the content. I want the div to extend the whole page vertically, even if there's not enough content in the div to fill the page. So I added height: 100% to the body and div.content in the stylesheet. Didn't work. Here's the page and the css file:http://hugdontmug.freehostia.com/http://hugdontmug.freehostia.com/stylesheet.cssWhat's wrong?

[hybridgoomba]

Height:100% will do nothing. Why? Because 100% of the height is what the height would be by default. No, what you need to edit is the actual size, in pixels. Here's how I changed it in my example:

height: 1000px;

You may not want it to go 1000px, but it's just an example. I wasn't sure how to make the border longer, but it might have something to do with the height or padding maybe.

[shadowayex]

I was told that if I had the height: 100% on all parent tags up to the body tag, it'd work. If I did your way I'd have to set it up for each page because some pages are long than others. I just want to make iit so the height will change as the content does, but in the case that the content doesn't fill the page to the bottom, the layout would still extend to the bottom. So a fixed height will not work.

[Ingolme]

If the height is 100% on all the ancestor elements it should work.There's on drawback: 100% height is the height of the browser viewport, which means that if the element has a margin on the top, part of it will be outside the viewport.The problem in your stylesheet is that you're only giving 100% to the body element. Try applying 100% to the html element too.html { height: 100%; }

[jlhaslip]

http://ryanfait.com