【发布时间】：2013-03-01 03:09:56
【问题描述】：
我正在制作一个液体页面，并且我有一个水平菜单栏 (ul) 绝对定位到底部（粘性页脚）。
这玩意没问题，但是当我调整浏览器大小时，显然菜单中的内部元素相互堆叠，使菜单太高并与主要内容重叠。
有没有办法（以下任何一种）
- 让绝对定位菜单“向下”增长？
- 或将与底部对齐的边缘设置为某个高度（使其从该点向底部增长）？
- 或为菜单提供布局，使其能够推送上述元素（我尝试过使用
overflow，但不起作用 给我）？
那是html：
<div class="container">
<div class="izda">
Foo
</div>
<div class="dcha">
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor</p>
<p>Lorem ipsum dolor LAST</p>
<ul>
<li>Item</li>
<li>Another</li>
<li>More</li>
<li>Item</li>
</ul>
</div>
</div>
还有css：
.container {position:relative}
.izda {background:red;
height:20em;
display:inline-block;
width:20%;
vertical-align:top;
}
.dcha {background:gold;
display:inline-block;
width:78%;
margin-bottom:3em;
}
ul {position:absolute;
bottom:0;
background:pink;
margin:0;
padding:0;
max-width:100%;
}
ul li {float:left;
list-style:none;
border:1px solid black;
margin:0 1em;
padding:1em;
}
这里有一个工作示例：http://jsfiddle.net/KQhLs/2/
如果你写更多的段落，菜单会正常下降，这要归功于他父亲的边缘底部。
但在调整框架大小时，您可以看到重叠效果。
提前致谢。网络应该只在现代浏览器中工作，如果可能的话，使用纯 css（无 JS）。
编辑：我认为风是这样吹的： How to avoid fixed element from hovering page contents? 到此结束： Sticky Footer for Responsive Site
但是没有有用的答案...
嗯，事实上我可以通过mediaqueries 来防止这种行为，这很简单。但我想知道是否有“一劳永逸”的解决方案。
EDIT2：我刚刚阅读了A list apart - Exploring footers。除了 JS 解决方案我尝试了所有方法，但问题仍然存在 - 如果您将浮动元素放在页脚内，它会与主要内容重叠。
另外，我读过CSS Sticky Footer，似乎也有同样的问题。
我想不出这用纯 css 是不可能实现的……我应该放弃吗？
【问题讨论】：
标签： css css-float responsive-design sticky-footer window-resize