Question

我有一个容器，里面有3个容器。前2个内容不多。我通过单击按钮显示和隐藏第一个（我正在使用Angular）。第二个具有静态内容。我不想有一个容器的滚动。我只需要第3个div滚动即可，它内容丰富。当单击按钮显示我的第一个div后，使容器成为overflow: hidden;时，我的第3 div的一部分不显示。第三者的身高为height: 100vh;。我是CSS和HTML的新手，如何解决这个问题？

<div class="container">
  <div *ngIf="showContent" class="1st-content"></div>
  <div class="2nd-content"></div>
  <div class="3rd-content"></div>
</div>

这是我的CSS。

.container {
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.3rd-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
}

Answer 1

使用此作为解决方案。

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

.container {
          overflow: hidden;
          height: 100vh;
          width: 100%;
        }

.third-content {
          width: 100%;
          height: 100vh;
          overflow-y: scroll;
          box-sizing: border-box;
        }

在容器内创建div以自动调整大小

1 个答案: