Question

我有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;容器中。这会导致这个问题吗？

Answer 1

只需将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隐藏所有内容，因为它没有显示项目的高度。

希望有所帮助。

Answer 2

我试过你的笔，如果我明白你的问题是什么，试着给固定条带一个合适的高度。

溢出隐藏隐藏所有内容

2 个答案: