html页面底部的空白区域

Question

当我制作我的HTNL页面时，它看起来很完美，但突然间，我一直在页面底部获得这个巨大的空白区域。你可以在http://thomaswd.com/pearinc2看到它。我怎么摆脱这个？！我的样式表位于http://thomaswd.com/pearinc2/style.css

Answer 1

如果您查看带有类back-iphone4s的HTML元素，您会发现它使用CSS进行相对定位。

如果您从position: relative的CSS规则中删除.back-iphone4s部分，您会发现它出现在您的空白处。

像这样使用position: relative总是很糟糕，如果没有相对定位的元素 那么会出现空格。

我建议将position: relative添加到以devices作为其类的div，然后在position: absolute;上使用.back-iphone4s并使用该方法设置其位置。这样back-iphone4s元素相对于它的父元素定位，而不是相对于普通文档流程中的元素。

还有很多其他方法可以解决这个问题，我瞥一眼我很想把这两款iphone变成一张图片，更少的HTML，更少的CSS和更少的图片下载，但是看起来你为了某种目的，他们可能已经将它们分开了，所以也许这不是一个可行的解决方案。

...... phew，希望有道理，现在让我知道。

Answer 2

将height提供给.devices类：

.devices {height: 520px;}

---

Answer 3

我只是快速浏览一下你的风格，我看到的技术非常难看。 您可以使用position：absolute设置所有主要元素，并使它们独立于上下文和内容流。而且因为它们是绝对的，你必须给它们一个高度 - 这会导致像丑陋的白色空间。 我会说你有错误的样式/结构化页面的概念。

尝试使用“position：absolute”非常罕见！