Question

问题是这样的（https://jsfiddle.net/Lpm2ghsr/4/）

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

添加＆＃34;身高：100％＆＃34;对于内容似乎没有100％意味着与我的父母相同的高度？

我已尝试添加＆＃34;溢出：自动＆＃34; .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

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

您的主要内容是＆＃34;内容＆＃34; class，所以将height应用于contents类。请尝试以下修改后的代码。

.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 - 滚动内容未正确扩展

2 个答案: