下拉菜单打破粘滞页脚

Posted 2023-03-21

【中文标题】下拉菜单打破粘滞页脚

【英文标题】：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;

【参考方案1】：

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

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

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

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