Question

这是我的课程：

.ticker-container {
    height: 100%;
    max-height: 40%;
    overflow: auto;
}

这个想法是“ div”容器应该是可滚动的。

Screenshot

但是由于某些原因，虽然它设置了div本身的最大大小，但是并没有使其可滚动。

html看起来像这样：

<div class="row ticker-container">
        <div class="col s6" id="ticker_container">
        </div>
        <div class="col s6" id="candidates">
        </div>
    </div>

我正在将内容附加到ticker_container。我试过将类添加到内部div容器中，但它仍然不能使div容器可滚动。任何帮助，将不胜感激。

这是生产中的站点：https://smag.2501.io/

编辑：要观察此行为，请在第二个输入字段中尝试输入“ TESTER”，然后按Enter

编辑：

.snowcontainer {
    background-image: radial-gradient(50% 176%, black 80%, black 100%);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-content: center;

    &__content {
        position: relative;
        align-self: center;
        padding: 3rem 0;
    }
}

.snow {
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.snow .svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

#snow-top-layer {
    will-change: transform;
    transform: translateY(-768px);
    animation: fall 22.5s infinite linear;
}

#snow-bottom-layer {
    will-change: transform;
    transform: translateY(-768px);
    animation: fall 45s infinite linear;
}

问题是我的积雪容器，它挡住了里面的东西。添加了z-index并解决了问题

Answer 1

添加到您的div.content位置：相对；和一些z-index div.snow覆盖了元素。

Answer 2

单位百分比始终与父元素的大小有关。

如果没有父母明确定义高度，则会发生百分比高度无法确定的情况。

将.ticker-container包装到.wrapper中并指定一个明确的高度（例如px，vh，rem，em）。

由于max-height的值覆盖了height的值，因此对于这两个百分比都没有意义。可以为px使用max-height或跳过height。

.wrapper {
  height: 90vh;
}

.ticker-container {
  max-height: 50%;
  overflow: auto;
}

<div class="wrapper">
  <hr>
  <ul class="ticker-container">
    <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. In, sed. Blanditiis architecto voluptates amet, rem temporibus vero quasi ex? Qui illum laudantium molestias unde doloremque quae libero. Autem, culpa voluptatibus!</li>
    <li>Atque voluptatum cumque quisquam maiores sunt provident incidunt explicabo? Sunt sequi asperiores delectus suscipit reprehenderit laboriosam nihil ad odit deleniti itaque saepe fugiat consequuntur quas exercitationem, maiores accusamus quod quis?</li>
    <li>Officiis nihil consequuntur amet vitae minima esse quaerat fuga, similique explicabo, aut quam cupiditate, eum nobis ratione aliquid maiores deleniti. Excepturi impedit provident similique atque cum est voluptatum eveniet ipsam!</li>
    <li>Voluptatibus quo est necessitatibus cum harum ratione pariatur rem fugit, dolore, amet deleniti magni maxime autem nam. Enim numquam perferendis at sint odio. Nemo vel quidem, odio aliquid optio velit?</li>
    <li>Quisquam velit non, ea exercitationem totam laborum. Nam, cum iure commodi adipisci distinctio voluptatum eius quos quas dolorum voluptas sit necessitatibus magnam quibusdam? Animi tempore rem minus nihil rerum nobis.</li>
    <li>Tempore et sint facilis eius itaque incidunt iusto soluta eos nobis ad est error minima fugiat, ea voluptatem mollitia suscipit maiores eveniet sunt natus officiis magnam dolore! Perspiciatis, officia culpa!</li>
    <li>At voluptas reiciendis possimus aut, cum explicabo corporis et incidunt sint. Quisquam ducimus magni id blanditiis sunt suscipit laborum nam reprehenderit, voluptate praesentium fugit quis repudiandae alias beatae dolorem! Vero.</li>
    <li>Nostrum ratione sit quas. Quibusdam eos sunt suscipit perferendis, in ad accusantium quam harum, quis natus placeat fugit, aspernatur eligendi sit vel. Libero ratione neque eligendi rem excepturi provident voluptatibus.</li>
    <li>Quisquam aspernatur minima atque nobis. Sint possimus laudantium, accusantium explicabo id repellendus saepe debitis sunt eos fugit tenetur, illum facere ratione, voluptas assumenda architecto quas aperiam ab enim tempore quod?</li>
    <li>Corporis illo illum sequi fugit exercitationem neque nulla sunt magnam nobis alias nihil delectus porro et itaque, iure maiores vel quia deserunt? Minima quia repudiandae libero officiis ipsum, pariatur doloremque.</li>
    <li>Quis aut, illum laboriosam, nemo asperiores temporibus facilis, quas magnam rerum dignissimos quidem excepturi quam. Earum reiciendis voluptate laboriosam animi. Nam qui, quaerat error minima consequatur reprehenderit quasi voluptatum quidem.</li>
    <li>Magnam debitis quisquam labore, tempora sapiente soluta mollitia quas, ex animi iste dicta, dolorum rem consequuntur fugit quidem dolores a laborum nemo qui autem molestiae quod vero aliquam! Dicta, quo.</li>
    <li>Eligendi iusto accusamus voluptatem aliquid, dolor quisquam perspiciatis pariatur cupiditate optio est, itaque rem soluta facere commodi nam beatae nemo necessitatibus debitis. Nisi, tenetur? Ipsa labore laboriosam harum nulla repellat.</li>
    <li>Quidem quos quod blanditiis accusantium tenetur perspiciatis qui dolorum perferendis, cumque, similique omnis enim hic praesentium doloribus dolorem. Sit saepe atque optio voluptatibus perspiciatis amet ad neque facilis dolorem unde.</li>
    <li>Quia, veniam quidem iusto adipisci voluptates magni at architecto tenetur numquam fugiat molestiae beatae inventore praesentium, recusandae impedit aliquid laudantium nihil libero pariatur totam sequi provident omnis soluta. Quam, labore!</li>
    <li>Molestiae perferendis nulla doloremque corporis, pariatur ipsum, tempore assumenda quo odio doloribus magni mollitia eaque magnam consequuntur possimus totam facere. Nemo libero soluta, dolores ex maiores quia delectus dignissimos labore.</li>
    <li>Officiis quam, perferendis aut minima eaque provident modi accusamus repudiandae officia quae. Necessitatibus deleniti laudantium porro quam nesciunt et aut id illo ea inventore, ullam consequatur officia eum voluptatibus corrupti.</li>
    <li>Accusantium magni itaque libero repudiandae, veniam odit iste. Laboriosam consectetur eius minima numquam suscipit iusto odit. Vel, dolorem earum, aut soluta ullam accusantium magnam, eos voluptates dignissimos aperiam ipsam error.</li>
    <li>Facilis asperiores dignissimos, repellat nisi molestias velit perspiciatis nihil consequuntur consectetur necessitatibus odit ex corporis laborum iste quae quas, saepe in debitis doloribus ad magni maiores porro temporibus. Ratione, hic?</li>
    <li>Veniam sunt iure repellendus fugit minima quas culpa esse natus temporibus rem nisi quaerat iste modi similique quis a vero odit eos dignissimos adipisci quos, in blanditiis. Architecto, soluta aperiam.</li>
  </ul>
  <hr>
</div>

即使添加了溢出CSS，div也无法滚动

2 个答案: