html – 修正了Div溢出屏幕

我有一个固定高度为100％的侧边栏.此侧边栏位于固定标题下方,因此顶部位于标题下方.
这会导致溢出滚动到达最后一个或两个元素：

这是HTML：


和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)

    .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.

height: calc(100% - 75px);

但是这个选项的browser support不太好.

html – 修正了Div溢出屏幕

猜你在找的HTML相关文章