Menu 下拉菜单可断开粘性页脚

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

这是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;
}

---

在CSS中，取

位置：绝对退出菜单类，页脚将向下移动以适应长菜单。如果希望页脚保持在浏览器窗口的底部，请将以下内容添加到页脚类中

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

位置：绝对位置将元素从文档流中取出。然后，该元素相对于其第一个定位（非静态）的祖先元素进行定位。将其从menu类中取出会将菜单放回文档流，并停止与页脚重叠的菜单