CSS overflow-y：scroll;失去了一些東西

我有一個問題，CSS overflow-y:scroll;CSS overflow-y：scroll;失去了一些東西

我創造了這個DEMO從codepen.io

在本演示中，你可以看到有一個左側邊欄。並且裏面有11個.layer div。但是如果從左側欄向下滾動，則只能看到9層和其他2層停留在內側。

我的CSS有什麼問題。我需要做什麼來修復它？

CSS

.container { 
    -webkit-animation: cardEnter 0.75s ease-in-out 0.5s; 
    animation: cardEnter 0.75s ease-in-out 0.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    display: block; 
    position: absolute; 
    height: auto; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    right: 0; 
    max-width: 980px; 
    min-width: 300px; 
    margin-top: 75px; 
    margin-bottom: 20px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #ffffff; 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2); 
    -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px; 
    border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -o-border-radius: 3px; 
    -moz-border-radius: 3px; 
    min-height: 140px; 
} 
.left{ 
    display: block; 
    position: absolute; 
    float: left; 
    width: 30%; 
    overflow: hidden; 
    padding: 0px; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    background-color: #ffffff; 
    border-right: 1px solid #d8dbdf; 
    -webkit-border-top-left-radius: 3px; 
    -webkit-border-bottom-left-radius: 3px; 
    -moz-border-radius-topleft: 3px; 
    -moz-border-radius-bottomleft: 3px; 
    border-top-left-radius: 3px; 
    border-bottom-left-radius: 3px; 
    transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; 
} 
.left-header { 
    -webkit-box-flex: 0; 
    -webkit-flex: none; 
    -ms-flex: none; 
    flex: none; 
    background-color: red; 
    color: #fff; 
    height: 108px; 
    position: relative; 
} 
.left-list { 
    z-index: 999 !important; 
    position: relative; 
    float: left; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    background-color: #ffffff; 
    opacity: 1; 
    -webkit-animation-duration: 0.9s; 
    animation-duration: 0.9s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-name: slideLeft; 
    animation-name: slideLeft; 
    -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    background-color:red; 
} 
.list-layers { 
    position: absolute; 
    height: 100%; 
    overflow-y: scroll; 
} 
.layer { 
    float: left; 
    width: 100%; 
    padding: 10px; 
    background-color: #ffffff; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    border-bottom: 1px solid #f7f7f7; 
}

來源

2015-06-04 innovation

的DIV類=「left」將溢出設置爲隱藏。如果您的瀏覽器視圖高度小於該容器的高度，則其下方的任何內容都將被隱藏。您可以快速查看我的意思，將.left的溢出更新爲「自動」而非「隱藏」，或者將瀏覽器中的縮放比例降低至50％左右，然後您會看到更多列表出現 –

@SteveHynding感謝你的答案。但我現在嘗試它，請再次檢查我的演示。當我滾動時，左側的標題不會留在那裏。綠色區域用於標題。 – innovation

@ humble.rumble這不是一個解決方案。請參閱我的[DEMO]（http://codepen.io/shadowman86/pen/pJeGeY） – innovation

設置height: 100%套元素的高度到它的父，如果包含在專區內，那麼它不會考慮到這一點的另一個因素。你可以改變這個...

.left-list { 
    position: relative;   
    width: 100%; 
    height: 100%; 
}

要這個......

它，這意味着它會從包含塊的頂部開始108px（或者說最接近祖先非靜態元素）並結束於包含塊的底部。

（Demo）

來源

2015-06-04 17:57:38

感謝您的關注和正確答案 – innovation

-1

更改.left類是這樣的：

變化overflow: auto到overflow: visible和bottom: 0到bottom: 40%

實際上它應該變成：

.left{ 
display: block; 
position: absolute; 
float: left; 
width: 30%; 
overflow: visible; 
padding: 0px; 
bottom: 40%; 
top: 0px; 
left: 0px; 
background-color: #FFF; 
border-right: 1px solid #D8DBDF; 
border-top-left-radius: 3px; 
border-bottom-left-radius: 3px; 
transition: opacity 2s ease 0s, width 2s ease 0s, left 2s ease 0s, font-size 2s ease 0s, color 2s ease 0s; 
}

來源

2015-06-04 18:01:19 JustCauseWhat

CSS overflow-y：scroll;失去了一些東西

回答

相關問題