html页面底部的空白

Question

When I made my HTNL page, it looked perfect, but all of a sudden, I've been getting this huge white space on the bottom of my page. you can see it at http://thomaswd.com/pearinc2 . How do I get rid of this?! My stylesheet's at http://thomaswd.com/pearinc2/style.css

Answer 1

If you look at the HTML element with the class back-iphone4s you'll notice it's positioned relatively using CSS.

If you remove the position: relative portion from the CSS rules for .back-iphone4s you'll notice it appears where your white space is.

Using position: relative like this is always horrible, white space appears where the element would have been if it wasn't positioned relatively.

What I would recommend is adding position: relative to the div with devices as its class, then use position: absolute; on .back-iphone4s and set it's position using that method. This way the back-iphone4s element is positioned relatively to it's parent, not relatively to where it would be in the normal document flow.

There are are a number of other ways you could solve this too, at I glance I would be very tempted to just turn those two iphones into one image, less HTML, less CSS and less images to download, but it appears you may have inteneded them to be seperate for a purpose, so maybe that's not a viable solution.

... phew, hope that makes sense, let me know if now.

Answer 2

给.devices类一个height ：

.devices {height: 520px;}

---

Answer 3

I just had a quick look at your style, what I saw is technically very ugly. You set all main elements with position:absolute and made them independent from context and content-flow. And because they are absolute, you have to give them a height - and that causes in things like that ugly white-space. I would say you have the wrong concept of styling / structuring the page.

Try to use "position:absolute" very rare!