html页面底部的空白

Question

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

Answer 1

如果您将HTML元素与back-iphone4s类一起查看，您会发现它使用CSS的位置相对较高。

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

使用position: relative喜欢这始终是可怕的，空白出现在元素本来如果它不是相对定位。

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

您也可以通过多种其他方式解决此问题，乍一看，我很想将这两个iPhone变成一个图像，减少HTML，减少CSS，减少下载图像，但是您似乎有意出于某种目的将它们分开，所以也许这不是可行的解决方案。

...，希望这有意义，让我知道是否现在。

Answer 2

给.devices类一个height ：

.devices {height: 520px;}

---

Answer 3

我只是快速浏览了一下您的样式，从技术上看，我觉得这很丑陋。 您将所有主要元素设置为position：absolute，并使它们独立于上下文和内容流。 而且由于它们是绝对的，因此您必须给它们一个高度-这会导致类似丑陋的空白。 我会说您对页面样式/结构的概念有误。

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