最小高度和绝对定位

Question

我正在开发集成横向滑动的移动网站。不幸的是，这在试图让我的网站布局的其余部分发挥作用时引起了头痛。

http://jsfiddle.net/N7eWS/4/ - 尝试重新调整浏览器窗口的大小，并在#wrapper（绿色）内部的内容中间看到#footer（红色）。这似乎是设置高度：大部分元素为100％，然后应用于水平滑动div（swipeview-masterpage-1）的绝对定位。

我希望它能让#wrapper扩展到内容的高度，#footer位于#wrapper下面，并且始终离开屏幕底部（您必须滚动才能看到它）。

无论如何，我可以使这项工作没有触及（或者做出微小的改变）swipeview div吗？任何想法，将不胜感激！

Answer 1

其中一个问题是#swipeview-masterpage-1上的position: absolute，然后是父母上的另一个absolute。父绝对元素不会扩展到任何绝对定位的子女的身高（example）。

你也有一个随机的<span>在混合，这是一个内联元素，并将有0的高度。除去这些以使事情更清楚。

现在为什么你的页脚出现在一个奇怪的方式。您的#wrapper将始终是父高度的100％，您的页脚将始终以100px（标题）+ 100％存在。禁用min-height属性，您将看到包装器折叠，并且页脚坐在100px。这就是为什么#wrapper内容与页脚重叠。