•  22-08-2019
  •  | 
  •  

Question

When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!

Here's the page: zxsdesign.com/main1.html

Here's a screenshot

zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG

Was it helpful?

Solution

It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.

Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.

You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.

OTHER TIPS

Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.

Try to use clear: left; or clear: both; in your style.

100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.

Also, your head tag isn't closed properly. Check this

Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.

Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.

And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top