最小高度和絕對定位

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內容與頁腳重疊。