我有一个固定高度为100％的侧边栏.此侧边栏位于固定标题下方,因此顶部位于标题下方.
这会导致溢出滚动到达最后一个或两个元素：
这是HTML：
@H_404_10@
和CSS：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #6ab014;
z-index: 100001;
height: 75px;
overflow: hidden;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
/********* Disable link to open sub-menu **********/
.header .header-image a {
pointer-events: none;
cursor: pointer;
}
/* Stop header from overlapping container */
.container {
position: relative;
margin-top: 75px;
width: 100%;
}
.main {
position: block;
width: 90%;
max-width: 80em;
margin: 0 auto;
padding: 0 1.875em;
}
/********* Side Menu **********/
.header nav {
position: fixed;
left: 0px;
top: 75px;
background: #87cc33;
width: 330px;
height: 100%;
z-index: 1000;
overflow:auto;
/* Transitions */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.header nav ul
{
padding: 0;
margin: 0;
list-style-type: none;
}
/* Open menu CSS */
.menu.menu-open {
left: 0px;
}
/********* Navigation Sub-menus **********/
.menu .nav-lvl-2.sub-menu-open-mobile{
/* Max-height may have to change with more sublinks */
max-height: 1000px;
display: block;
opacity: 1;
}
.menu .nav-lvl-2 {
background: #a5e25b;
max-height: 0px;
display: none;
opacity: 0;
/* Transitions */
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
transition: all .3s ease;
}
.menu .nav-lvl-2 a {
border-bottom: 1px solid #fff;
}
/********* Disable links to open sub-menu **********/
.has-sub-menu {
pointer-events: none;
cursor: pointer;
}
.menu li:hover {
cursor: pointer;
}
/********* Link CSS **********/
.menu a{
display: block;
color: #fff;
font-size: 1.1em;
font-weight: 300;
border-bottom: 1px solid #a5e25b;
padding: 1em;
text-decoration: none;
}
/******* Mobile dropdown arrow - down *********/
a.has-sub-menu:not(.sub-menu-open-mobile):before {
position: absolute;
content: "";
left: 290px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 11px solid #fff;
margin-top: 7px;
}
/******* Mobile dropdown arrow - up *********/
a.has-sub-menu.sub-menu-open-mobile:before {
position: absolute;
content: "";
left: 290px;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 11px solid #fff;
margin-top: 7px;
}
/******* dropdown link css *********/
a.has-sub-menu:hover:before,a.has-sub-menu:focus:before,a.has-sub-menu:active:before {
border-color: transparent #730800;
}
a.has-sub-menu:hover:after,a.has-sub-menu:focus:after,a.has-sub-menu:active:after {
border-color: #730800;
}
有没有办法使用CSS而不是JQuery / Javascript来解决这个问题？
最佳答案
如何使用bottom：0而不是使用height：100％.使用高度：100％加上最高值会将其推离页面.
更新.header nav(JSFiddle)
@H_404_10@ .header nav {
position: fixed;
left: 0px;
top: 75px;
background: #87cc33;
width: 330px;
bottom: 0;
z-index: 1000;
overflow:auto;
/* Transitions */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
或者,您可以使用高度与calc.
@H_404_10@height: calc(100% - 75px);
但是这个选项的browser support不太好.
