最小高度和绝对定位

时间:2012-09-18 14:49:56

标签: css

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

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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

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