页脚和滚动条中的菜单停止

Question

您好，我想知道如何让它在我的页脚中停止我的下拉菜单？ 当我单击法国时，列表滚动但没有停在我的页脚处，您看不到隐藏在页脚后面的菜单的其余部分。 这就是我尝试实现滚动条的原因。

菜单CSS：

body {
 font-size: 100%;
 background:#32373d;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#vertical { 
width: 260px;
font-size: 0.8125em;
position: absolute;
float: right;
}


.menuv {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px   rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}

页脚 CSS：

#footer {
position:absolute;
left:0px;
bottom:0px;
height:60px;
width:100%;
background: #258dc8; /* Old browsers */
background: -moz-linear-gradient(top,  #258dc8 0%, #258dc8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color- stop(0%,#258dc8),     color-stop(100%,#258dc8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #258dc8 0%,#258dc8 100%); /*          Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #258dc8 0%,#258dc8 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #258dc8 0%,#258dc8 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #258dc8 0%,#258dc8 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8',         endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
}

问题：https://ps3land.franceserv.com/

Answer 1

您将不得不面对代码中的几个问题。基本上你需要给你的元素#vertical 和它的ul 下列样式：

#vertical {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
    height: 100%;
    padding-top: 50px    // height of header;
    padding-bottom: 60px // height of footer
}

#vertical > ul {
    overflow-y: scroll;
    height: 100%;
}

它还不完美，但这应该可以帮助您入门。

Answer 2

• 从您的body 标签中删除overflow: hidden
• 将<div id="vertical"> 的height 属性更改为大约500px
• 从ul li a 中删除填充
• 将#vertical 的width 更改为大约240px
• 添加到#vertical，overflow: scroll

您还必须使用此方法解决其他几个问题，但是您用来实现侧边栏且页脚不重叠的组合可能需要 jQuery 或 JavaScript。