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

从overflow: hidden标记

body

将height的{{1}}属性更改为约<div id="vertical">
从500px
将ul li a的{{1}}更改为约width
添加到#vertical，240px

使用此方法还有其他一些问题需要解决，但是在没有页脚重叠的情况下用于实现侧边栏的组合可能需要使用jQuery或JavaScript。

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

2 个答案: