html - html页面底部的空白

Question

当我制作 HTNL 页面时，它看起来很完美，但突然之间，我的页面底部出现了这个巨大的空白区域。你可以在http://thomaswd.com/pearinc2看到它.我该如何摆脱这个？!我的样式表位于 http://thomaswd.com/pearinc2/style.css

Answer 1

如果您查看类为 back-iphone4s 的 HTML 元素您会注意到它是使用 CSS 相对定位的。

如果删除 position: relative .back-iphone4s 的 CSS 规则部分你会注意到它出现在你的空白区域。

使用 position: relative像这样总是很糟糕，空白出现在元素本来如果不是相对定位的地方。

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

还有很多其他方法可以解决这个问题，乍一看，我很想把这两部 iPhone 变成一个图像，更少的 HTML、更少的 CSS 和更少的图像下载，但看起来你可能出于某种目的而打算将它们分开，所以这可能不是一个可行的解决方案。

...呸，希望这是有道理的，如果现在让我知道。