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

問題の 1 つは、親のposition: absolute問題#swipeview-masterpage-1ですabsolute。親の絶対要素は、絶対配置された子の高さまで拡張されません ( example )。

これは<span>インライン要素であり、とにかく高さが 0 になります。それを削除して、物事を明確にします。

次に、フッターが奇妙な方法で表示される理由について説明します。常に親の高さの 100% になり、フッター#wrapperは常に 100px (ヘッダー) + 100% に存在します。プロパティを無効にするmin-heightと、ラッパーが折りたたまれ、フッターが 100px に収まります。そのため、#wrapperコンテンツがフッターに重なっています。

于 2012-10-22T09:37:08.873 に答える