Jump to content

Page Length


jense
 Share

Recommended Posts

Hello all,I'm fairly new at coding with CSS and it works out pretty well, but I do have a question I couldn't find the answer to in the tutorials.I would like the height of my pages to be as long as the browser you're viewing it in. I know that you can set the height at a certain amount of pixels, but that's not what I'm after. You can see -- here -- that when I don't write enough the dark red just stops showing. I can solve it with  , but that makes it too messy. Besides, if you view it in 800x600 or 1024x768 or even bigger, it would all be different as well...So, I would like the bottom of the dark red to be the bottom of the browser. Can anyone help me out?Thanks ahead!Jense

Link to comment
Share on other sites

You have to set the html,body height to 100% and every 'copntainer' you make to have a height of 100%...this will sort of do what you want but every browser seems to interpret this differently making it unreliable and clumsy..I have yet to find a sure fire way to do this.

Link to comment
Share on other sites

The method that aspnetguy suggest works in all browsers besides IE6 where it's buggy. A way around this is to insert this into the CSS code.

html, body{height: 100%;}*html{height: auto;}

As far as I know, it should work in all modern browsers(IE6, FireFox, Opera, Safari and even IE 5(both Windows and MAC)).

Link to comment
Share on other sites

Besides what I showed, you must also give the div that is going to be stretched a height of 100%. The only thing the code above does is to "prepare" the (X)HTML for the big stretch.The star (*) before the second CSS selector is a trick to set a specific thing for IE borwsers. Because of the star, IE reads the code and because it specifies priorities only for the HTML, it is treated with a higher priority over the "html, body" selector.Why this method? Streching the html and body along with the stretched div works in all browsers besides IE6 where it gives unnecessary scrollbars. Stretching only the body works in all browsers including IE, but it doesn't work on Safari.=> By combinig theese two tricks, we have created a code which should work everywhere.[edit] @aspnetguy Well, both of theese methods are described in www.quirksmode.org. The only thing I have done in this matter is to combine the two best methods :) . In fact, I have already posted this solution few times in this forum. I think there was one time where there was even your post there :) [/edit]

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...