溢出隐藏隐藏所有内容

我有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

溢出隐藏隐藏所有内容

回答

相关问题