最小高度和绝对定位

Question

我正在开发一个集成水平滑动的移动网站。不幸的是，当我试图让其余的网站布局工作时，这会让人头痛。

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

我希望它能让#wrapper扩展到内容的高度，＃footer位于#wrapper下面，并且总是在屏幕的底部（你应该滚动查看它）。

无论如何，我可以在不触及（或者可能对其进行细微更改）swipeview div的情况下完成这项工作吗？任何想法将不胜感激！

Answer 1

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

混音中也有一个随机<span>，它是一个内联元素，无论如何都会有0的高度。删除它以使事情更清楚。

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