【发布时间】：2013-01-25 22:53:38
【问题描述】：
当我制作我的 HTNL 页面时，它看起来很完美，但突然之间，我的页面底部出现了这个巨大的空白。你可以在http://thomaswd.com/pearinc2看到它。我该如何摆脱这个？！我的样式表位于http://thomaswd.com/pearinc2/style.css
【问题讨论】：
【发布时间】：2013-01-25 22:53:38
【问题描述】：
如果您查看带有 back-iphone4s 类的 HTML 元素，您会注意到它是使用 CSS 相对定位的。
如果您从 .back-iphone4s 的 CSS 规则中删除 position: relative 部分，您会注意到它出现在您的空白处。
像这样使用position: relative 总是很糟糕，如果元素没有相对定位，本应的位置会出现空白。
我建议将position: relative 添加到以devices 作为其类的div，然后在.back-iphone4s 上使用position: absolute; 并使用该方法设置它的位置。这样back-iphone4s 元素相对于它的父元素定位，而不是相对于它在正常文档流中的位置。
还有很多其他方法可以解决这个问题，乍一看，我很想把这两部 iPhone 变成一张图片，更少的 HTML、更少的 CSS 和更少的图片要下载，但看起来你可能出于某种目的打算将它们分开，所以也许这不是一个可行的解决方案。
...唷，希望这是有道理的，如果现在告诉我。
【讨论】：
-
嗯...它不起作用。我尝试使用 position:absolute 并且空白仍然存在
-
我发布了新版本，没有相同的url，请看一下
-
您是否将
position: relative;放在devicesdiv 上？ -
当我在我的端使用 firebug 时它工作得很好，你能用你尝试过的 css 更新你发布的链接吗？然后我可以看到你哪里出错了
-
在您修改后的 HTML/CSS 中，您在底部添加了一个高度为 520px 的部分 div ...这就是现在导致空白的原因。
我只是快速浏览了一下你的风格，我所看到的在技术上非常难看。 您使用 position:absolute 设置所有主要元素，并使它们独立于上下文和内容流。而且因为它们是绝对的，所以你必须给它们一个高度——这会导致像丑陋的空白这样的事情。 我会说你对页面样式/结构有错误的概念。
尽量少用"position:absolute"！
【讨论】：
-
我无法在没有位置的情况下将内容设为全宽：绝对
-
“全宽”是什么意思？无需使用
position: absolute即可轻松获取覆盖页面宽度的内容，只需使用百分比宽度，例如.example { width: 100%; }
给.devices 类一个height：
.devices {height: 520px;}
【讨论】：
-
或者试试这个：
.devices {height: 520px !important;}