Hi

 

I've been web developing for a while but have never seemed to be able to work this out.. Does anyone know how to get a div to be the full height of the users screen as a default. I've tried setting the body to height:100% and then setting the div height to 100% but it's not happy.

 

I also thought of adding a min-height but that would mean unnecessary scroll on certain screens.

 

Any help much appreciated (I'm sure I must have missed something really simple!)

 

 

 

35173

Hi

 

I've been web developing for a while but have never seemed to be able to work this out.. Does anyone know how to get a div to be the full height of the users screen as a default. I've tried setting the body to height:100% and then setting the div height to 100% but it's not happy.

 

I also thought of adding a min-height but that would mean unnecessary scroll on certain screens.

 

Any help much appreciated (I'm sure I must have missed something really simple!)

 

 

 

35173

 

The short and most basic answer is: it's a bit harder than horizontal styling. Horizontal flow is built right in and very easy to manage, but as soon as you're talking vertical flow things get a little more complicated. The Internet was initially designed for raw information, so pages just needed to scroll for as long as they went on for, with little regard for design. This is a throwback to that. It's possible though, it's just vertical alignment that gets tricky in a tableless world.

 

Now, that's all well and good, but what about some practical help? Well you have a couple of choices. If you're looking to just have a website layout with 100% height, there are sticky footers. There is the kind that has a fixed position at the bottom of the screen (personally I dislike these) and there's the type that displays the footer at the bottom if the page in question isn't 100% of the screen height, but it's not fixed (I much prefer these). If the content is higher than the height of the screen then it's business as usual, the footer just gets pushed down. A personal favourite of mine is Ryan Fait's sticky footer which can be viewed at http://ryanfait.com/sticky-footer/ - it's fairly straight forward, cross browser, and doesn't involve using tables.

 

If it's not a sticky footer you're after, then you should know that vertical styling wont happen unless your parents (all the way up the cascade) also specify height information. This means html as well as body.

This page may interest you

 

A frequently asked question in CSS forums is how to create pages that stretch vertically to fill the browser window, regardless of the amount of content. With tables, you would nest your entire design in a table with a single cell and set both the cell and table's height to be 100 percent. With CSS, it's also quite simple and easy. In this tutorial, you will learn the basic CSS technique for making pages fill the browser window, which you can also use any time you have a div that you want to stretch to fill its parent.

That page is an excellent explanation, nice and clear. Where you're going wrong is likely to be not specifying html as 100% either. Ensure your entire cascade specifies height information including html. As you'll see in that article you need to be specifying:

 

html, body { height: 100%; }

and so on down the cascade. I've tidied up my original answer to not confuse the issue with vertical alignment.

Thanks very much for your your advice, much appreciated, I've tried out the html and body 100% idea and it's worked a treat.

 

Thanks very much for the sticky footer idea as well, I will log it away for future use. Thanks!

the html, body need to be set to 100% as well as the div.