2

I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.

http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).

I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).

Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!

4

1 回答 1

0

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

您还有一个随机<span>元素，它是一个内联元素，无论如何高度都为 0。删除它以使事情更清楚。

现在来看看为什么你的页脚以一种奇怪的方式出现。您#wrapper将始终是父高度的 100%，您的页脚将始终存在于 100px（页眉）+ 100%。禁用该min-height属性，您将看到包装器折叠，并且页脚位于 100 像素处。这就是#wrapper内容与页脚重叠的原因。

于 2012-10-22T09:37:08.873 回答