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

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%;
}

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