CSS

Question

问题是这样的(https://jsfiddle.net/Lpm2ghsr/4/)

滚动时，通过背景颜色可以看出.content的高度与容器的高度相同，而不是扩展到容器的高度实际内容。

向内容添加 "height: 100%" 似乎不起作用，因为我认为 100% 意味着与其父项高度相同？

我已经尝试将 "overflow: auto" 添加到 .content，但这并不是我真正想要的，因为滚动条应该在外部，如示例所示。

这是 HTML 标记

<header></header>
<div class="container">
  <section class="content">
    <pre>some text
    some text
    some text
    some text
    some text
    some text</pre>
  </section>
</div>

和 CSS:

body{
  overflow: hidden;
  width: 99%;
  height: 100%;
  min-height: 100%;
  position: absolute;
}
header{
  height: 100px;
  width: 100%;
  background-color: black;
}

.container{
  display: flex;
  overflow: auto;
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
.content{
  width: 100%;
  background-color: #bbb;
}

pre{
  width: 100%;
  font-size: 2rem;
}

Answer 1

我希望这是最简单的方法。试试这个。

您的主要内容在 "contents" class 中，因此请将高度应用于内容 class。试试下面修改后的代码。

.container{
  display: flex;
  overflow: auto;
  width: 100%;
  height: 100%;
  position: relative;
}
.content{
  width: 100%;
  height: calc(100% - 100px);
  background-color: #bbb;
  overflow: auto;
}

Answer 2

将 .container 显示从 flex 更改为块，它将起作用。

.container {
   display: block;
}

CSS - 滚动内容未正确展开

CSS - scroll content not expanding properly

html

height

overflow

scrollbar