时间戳

首页 > 解决方案 > 将溢出设置为滚动后，出现一个空滚动条但元素仍然溢出

html - 将溢出设置为滚动后，出现一个空滚动条但元素仍然溢出

问题描述

在下面的代码中，我尝试将溢出属性设置.deck-wrapper为滚动，但.deck-card似乎超出了网站的框架。

<main>
    <section class="article-deck">
        <div class="deck-wrapper">
            <div class="deck-starter"></div>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
            <article class="deck-card"></article>
        </div>
    </section>
</main>

这是 SASS/CSS 代码：

.article-deck {
    width: inherit;
    overflow: scroll;
}
.deck-wrapper {
    background-color: #eeeeee;
    overflow: scroll;
}
.deck-starter {
    float: left;
    height: $deck-card-height;
    width: $deck-card-width;
    background-color: $color-light-green;
    border-radius: 20px;
}
.deck-card {

    float: left;
    position: absolute;
    height: $deck-card-height;
    width: $deck-card-width;

    border: 1px solid black;
    background-color: $color-white;
    border-radius: 20px;
    // box-shadow: 2px 15px 15px 10px #777777;
    // z-index: $deck-card-max-z-index;

    @for $i from 1 through $deck-card-num {
        &:nth-child(#{$i}) {
            left: $deck-card-offset * $i;
            // z-index: $i * 15;   
        }
    }
    &:hover {
        transform: translate(3rem, -3rem);
        transition: all 0.2s;
        // z-index: $deck-card-max-z-index + 1;
    }

}

标签： htmlcss

解决方案

变量值未知。我认为这是因为 .deck-card 具有绝对性。

推荐阅读