1

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

菜单 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/

4

2 回答 2

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

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

于 2013-04-13T20:15:51.360 回答
0

您将不得不面对代码中的几个问题。基本上你需要给你的元素#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%;
}

它还不完美，但这应该让你开始。

于 2013-04-13T20:00:34.530 回答