你好,我想知道如何让它在我的页脚停止我的下拉菜单? 当我点击法国时,列表滚动但没有停在我的页脚处,你看不到隐藏在页脚后面的菜单的其余部分。 这就是我尝试实现滚动条的原因。
菜单 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 */
}
最佳答案
您将不得不面对代码中的几个问题。基本上你需要给你的元素 #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%;
}
它还不完美,但这应该可以帮助您入门。
关于html - 页脚和滚动条中的菜单停止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15992016/