下拉菜单打破粘滞页脚答案

【问题标题】：Dropdown Menu Breaks Sticky Footer下拉菜单打破粘滞页脚
【发布时间】：2014-01-08 10:11:30
【问题描述】：

我有一个带有动态内容和高度的页脚，所以我使用的是粘性页脚的 display:table 版本。问题是我有一个带有绝对定位下拉菜单的菜单，如果页面太小、菜单太大等，它会延伸到页脚之外。这会在页脚下方产生一个间隙。以小提琴为例。谢谢。 http://jsfiddle.net/wmTn9/

这是 css，虽然它在小提琴中更容易看到。

    html, body {
    height: 100%;
    margin: 0;
}
.wrapper {
    display: table;
    height: 100%;
    width: 100%;
    background: yellow;
}
.content {
    display: table-row;
    height: 100%;
    background: turquoise;
    position:relative;
}
.menu {
    position:absolute;
    left:0;
    width:50%;
    background:yellow;
    overflow:hidden;
    max-height:20px;
}
.menu:hover {
    max-height:1000px;
}
.menu li {
    height:800px
}
.footer {
    display: table-row;
    background: lightgray;
}
.footer:hover h3 {
    height:300px;
}

【问题讨论】：

标签： menu footer sticky

【解决方案1】：

在您的 CSS 中，将 position:absolute; 从菜单类中取出，页脚将向下移动以适应长菜单。如果您希望页脚保留在浏览器窗口的底部，请将以下内容添加到您的页脚类中...

width:100%;
position:fixed;
bottom:0;

position:absolute; 将元素从文档流中取出。然后该元素相对于其第一个定位（非静态）祖先元素进行定位。将其从菜单类中取出会将菜单重新放入文档流中并停止菜单与页脚重叠。

Amended Fiddle with footer stuck to the bottom of the browser window

【讨论】：