css div元素的Html滚动框

vfh0ocws  于 2022-11-26  发布在  其他
关注(0)|答案(1)|浏览(205)

我有这些“容器”,基本上是块与标题和句子或两个悬停动画。我试图有多个块进行彼此垂直滚动只在屏幕上的一个区域。

<div style="width: 300px; height: 100px; overflow-y:auto;">
<div class="container">
                <div class="fancy_card">
                    <div class="card_text">     
                        <h3 class="title">Title</h3>
                        <div class="summary">
                            Content
                        </div>
                        </div>
                    </div>
                </div>

我已经试过使用overflow-y:auto,overflow:scroll,我已经改变了高度,但我仍然不能弄清楚。任何帮助将不胜感激。

bzzcjhmw

bzzcjhmw1#

<div style="width: 300px; height: 100px; overflow-y: auto">
      <div class="container">
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
        <div class="fancy_card">
          <div class="card_text">
            <h3 class="title">Title</h3>
            <div class="summary">Content</div>
          </div>
        </div>
      </div>
    </div>

这已经起作用了。你只需要足够的内容使它需要滚动。

相关问题