html - 如何为内部块制作滚动？

Question

我有一个子块.body，如果 contant 不适合父块，我需要进行垂直滚动#container。只需滚动里面的内容.body，不要滚动.header。

#container {
  min-height: fit-content;
  max-height: 50%;
  overflow-y: auto;
  border: 1px solid red;
  overflow: hidden;
}

.body {
  overflow-y: scroll;
  height: inherit;
}

.item {
  padding: 20px;
  height: 70px;
  border-bottom: 1px solid #ccc
}

<div id="container">
  <div>
    Header
  </div>
  <div class="body">
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
    <div class="item">
      Item
    </div>
  </div>
</div>

我的完整代码是：

标签： htmlcss

Answer 1

嗨，

只是给容器指定的高度而不是fit-content

像这样

#container {
  min-height: fit-content;
  max-height: 50%;
  overflow-y: auto;
  border: 1px solid red;
  overflow:hidden;
  height: 200px;
}

请参阅下面的片段

#container {
  min-height: fit-content;
  max-height: 50%;
  overflow-y: auto;
  border: 1px solid red;
  overflow:hidden;
  height: 200px;
  
}

.body {
  overflow-y:scroll;
  height: inherit;
}

.item {
  padding: 20px;
  height: 70px;
  border-bottom: 1px solid #ccc
}

<div id="container">
  <div>
  Header
  </div>
  <div class="body">
      <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
            <div class="item">
      Item
      </div>
  </div>
</div>