如何在拉伸内容中设置溢出滚动的 div 样式答案

【问题标题】：How to style a div with overflow scroll inside stretched content如何在拉伸内容中设置溢出滚动的 div 样式
【发布时间】：2022-11-22 20:39:36
【问题描述】：

我希望在一个永远不会超出浏览器窗口的页面中有一个页眉、页脚和主要内容。

如果主区域内的组件溢出，我希望它有一个滚动条（编辑: 但它仍应填满主要区域）。我尝试了 flexbox、网格、各种路径和错误，但即使可能，我也找不到解决方案。当组件溢出时，它总是会过度拉伸主要区域，从而将页脚推出浏览器边界，或者主要区域溢出到位于页面底部的页脚之外。

我发现了这个问题 How to make inner div with overflow:scroll stay inside outer div?，但 height: 100% 的组合对我没有用。

编辑：This 是我目前的尝试

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-rows: 3rem 1fr 3rem;
  font-family: system-ui, sans-serif;
}

header,
footer {
  background-color: lightblue;
  padding: 1rem;
  text-align: center;
}

main {
  padding: 2rem;
  text-align: center;
  height: 100%;
}

.component {
  background-color: lightblue;
  padding: 1rem;
  overflow-y: scroll;
}

    <header>header</header>
    <main>
      <p>main</p>
      <div class="component">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla similique assumenda unde doloribus velit accusantium dolores accusamus iste! Doloribus atque fuga debitis, laboriosam rerum mollitia eum dolorem facilis, officiis, modi voluptatem optio reiciendis delectus minus pariatur nam nulla vitae quasi quis tenetur alias amet eaque molestias. Doloremque ipsam sit fuga ex delectus adipisci et porro perferendis accusantium sequi. Doloribus consequuntur quas quo temporibus saepe accusamus alias porro facilis error, perspiciatis ut rem? Ullam quibusdam quod est molestias? Obcaecati, similique praesentium quaerat doloribus beatae laboriosam corrupti qui, voluptatem officiis sed repellat commodi voluptates! Eos dicta, neque numquam facilis, quidem in laboriosam accusantium expedita hic eaque ad placeat, vitae praesentium temporibus quod. Perferendis consequuntur commodi debitis repellat ullam velit, at inventore repudiandae sit illo placeat autem, corrupti quibusdam praesentium soluta rerum? Minima libero deserunt praesentium suscipit recusandae, similique inventore sunt debitis ut corrupti dolorem placeat iure nemo eos mollitia earum vero dicta illum, necessitatibus rem a? Ad nemo quod possimus cum perferendis eum dicta placeat minima corporis velit impedit incidunt libero mollitia itaque quae inventore molestias dolorum non, aspernatur eos tempore. Sed perferendis corporis eius quod nulla temporibus architecto quia minus officiis maxime! A laborum quisquam tenetur natus consequatur magnam? Totam, illo?
      </div>
    </main>
    <footer>footer</footer>

【问题讨论】：

你能分享你的代码的 stackblitz 版本吗？
感谢您的建议。我在问题中包含了链接

标签： html css

【解决方案1】：

要使 .component 可滚动，您需要分配 max-height 并在 CSS 中设置 overflow: scroll

body {
  margin: 0;
  height: 100vh;
}

.flex_column_center {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.card {
  background-color: #C3BEE7;
  margin: 8px 16px;
  padding: 24px;
  font-size: 16px;
  border-radius: 10px;
}

.component {
  background-color: #AAAAAA;
  padding: 16px;
  max-height: 250px;
  overflow: scroll;
}

<body>
  <header class="card flex_column_center">
    header
  </header>
  <main class="card flex_column_center">
    main
    <div class="component flex_column_center">
      <span>.component</span>
      <img src="https://picsum.photos/500" />
    </div>
  </main>
  <footer class="card flex_column_center">
    footer
  </footer>
</body>

【讨论】：

问题是我不想准确指定组件的高度。我想让它填满主要区域。

【解决方案2】：

我会在你的身体上使用 use flex 并为你的内容增加 flex grow，然后在你的内容中绝对放置一个 div，它有 overflow auto

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  position: relative;
  flex-grow: 1;
}

.scroller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.padded {
  display: block;
  padding-top: 100vh;
}

<div class="header">header</div>
<div class="content">
  <div class="scroller">
    content with scroll
    <span class="padded">padded content to show scroll - don't need this span</span>
  </div>
</div>
<div class="footer">footer</div>

如果您需要组件上方的内容，那么您可以在内容中重复弹性模式：

html,
body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.component {
  flex-grow: 1;
  position: relative;
}

.scroller {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.padded {
  display: block;
  padding-top: 100vh;
}

<div class="header">header</div>
<div class="content">
  some content here
  <div class="component">
    <div class="scroller">
      component content
      <span class="padded">padded content to show scroll - don't need this span</span>
    </div>
  </div>
</div>
<div class="footer">footer</div>

【讨论】：