溢出隱藏隱藏所有內容

我有this pen，這是一個大項目的片段，我試圖隱藏一個div，因爲它被轉換到左邊。需要隱藏溢出內容的元素是.fixed-strip，要隱藏的元素是.strip。只要我將overflow: hidden;或overflow-x: hidden;添加到.fixed-strip，它就會隱藏所有內容，而不僅僅是已轉換的內容。溢出隱藏隱藏所有內容

.fixed-strip{ 
    max-width: 20rem; 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
} 

.strip { 
    display: block; 
    background-color: fade_out(rgba(122, 116, 97, 1),0.6); 
    left: 0; 
    top: 1rem; 
    width:300px; 
    height:80px; 
    position: absolute; 
    transition: transform .5s ease-in-out; 
    z-index: 1000; 
}

由於其他原因，整個標題必須位於position:fixed;容器中。這是否會導致問題？

來源

2017-09-05 sansSpoon

我試過了你的筆，如果我明白你的問題是什麼，試着給一個合適的高度去固定條。

來源

2017-09-05 02:22:01 deg

只需添加height: 100%;到.fixed-strip：

.fixed-strip { 
    max-width: 20rem; 
    padding-left: 1.5rem; 
    padding-right: 1.5rem; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
}

這是因爲.fixed-strip不必在所有的高度，它只是顯示默認的溢出。它沒有填充高度，因爲孩子是position: absolute;這就是爲什麼一旦你overflow: hidden一切都被隱藏，因爲它沒有高度的項目顯示。

希望有所幫助。

來源

2017-09-05 02:21:13 masterpreenz

感謝您的全面解釋，請投票回答您的問題，但獎勵給@deg，因爲他在1分鐘之前得到了;） – sansSpoon

溢出隱藏隱藏所有內容

回答

相關問題