jense Posted February 8, 2006 Share Posted February 8, 2006 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 More sharing options...
aspnetguy Posted February 8, 2006 Share Posted February 8, 2006 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 More sharing options...
boen_robot Posted February 8, 2006 Share Posted February 8, 2006 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 More sharing options...
jense Posted February 9, 2006 Author Share Posted February 9, 2006 Apparently it doesn't seem to work. I think I'm doing something wrong...What does the * in in *html mean? Link to comment Share on other sites More sharing options...
boen_robot Posted February 9, 2006 Share Posted February 9, 2006 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 More sharing options...
aspnetguy Posted February 9, 2006 Share Posted February 9, 2006 post your code and we can adjust it for you.Thanks boen...I have never seen that and I have read a lot of forums and asked in a lot to and never recieved that answer. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now