Question

我有一个动态内容的页脚＆amp;高度，所以我正在使用显示：粘性页脚的表格版本。问题是如果页面太小，菜单太大等，我有一个带有绝对定位下拉菜单的菜单，它会延伸到页脚之外。这会在页脚下方创建一个间隙。查看小提琴的例子。谢谢。 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;
}

Answer 1

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

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

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

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

下拉菜单打破粘滞页脚

1 个答案: