Question

I am currently working on a website for my Web Class.

Here is the link to my file which is hosted in my Dropbox public folder:

https://dl.dropbox.com/u/66340864/hollywoodsite/index.html

I was hoping you could just view my code from there. If you can’t just let me know and I will find a way to narrow it down and put it here.

I am trying to do a one page layout and I basically just have sections stacked on each other and I would like to have each section fill the entire space of the screen.

The problem occurs down towards the bottom in the Policies and Contact sections. They have abnormally long heights and I can’t pinpoint what the problem is. Can someone point me in the right direction.

Please forgive the code writing. I know I have a lot to cleanup and work on.

Thanks for all your time.

Answer 1

You have your sections set to 100% height, so if your page is going to grow with content then the 100% will get progressively larger- make sense?

If you want sections to each be 100% of the browser window height, all you need to add is:

html, body{
    width:100%;
    height:100%;
}

Then all percentage height of immediate children in body will refer to the height of the browser instead of the height of the content. Happy hacking!