DIV 中大小未知的可滚动文本？

Question

我有这个：

<section>
  <div id="dont-scroll">
    Unknown content!
  </div>
  <div>
    <div id="scroll-this">
      This part should be scrollable when
      the total content overflows the SECTION
    </div>
  </div>
</section>

如您所见，我希望用户能够滚动下半部分的内容，而不是上半部分。

我可以通过使用 "resize" 事件、检查 SECTION 和 "dont-scroll" 的大小等来实现此目的

但是，今天有没有更简单的方法，只使用 CSS？

Answer 1

定义 scroll-this id 的高度并使用 overflow-y: scroll 将使 scroll-this id 可以滚动

#scroll-this {
    height: 10px; //this can be as per your choice 
    overflow-y: scroll;
}

我用了10px，因为你的内容太少了。

"This part should be scrollable when the total content overflows the SECTION".

只有当换行内容大于提供的高度时才会显示滚动。

Answer 2

一种使用 Flexbox 的可能方法

body, html {
   margin: 0;
   padding: 0;
}

section {
   height: 100vh;
   display: flex;
   flex-flow: column nowrap;
}

section > div {
   padding: 20px;
}

div:not([id]) {
   background: #d8d8dc;
   flex: 1;
   overflow: auto;
}

<section>
  <div id="dont-scroll">
    Unknown content! <br />
    Lorem ipsum sit dolor amet
  </div>
  <div>
    <div id="scroll-this">
      This part should be scrollable when
      the total content overflows the SECTION
      <br /><br />
      
       <p>Lorem ipsum dolor sit amet,   
          consectetuer adipiscing elit. Donec 
          odio. Quisque volutpat mattis eros. 
          Nullam malesuada erat ut turpis. 
          Suspendisse urna nibh, viverra non, 
          semper suscipit, posuere a, pede.</p>

      ...


    </div>
  </div>
</section>

示例 codepen

Answer 3

#scroll-this {
  height: 20px;
  overflow-y: scroll;
}

<section style="width:200px">
  <div id="dont-scroll">
    Unknown content!
  </div>
  <div>
    <div id="scroll-this">
      This part should be scrollable when the total content overflows the SECTION
    </div>
  </div>
</section>

DIV 中大小未知的可滚动文本？

Scrollable text in a DIV of unknown size?

html

javascript

css

scroll

resize