Question

是否可以使高度为100％的div并使内部项目溢出滚动。

这听起来像是一个简单的问题（可能是），但是我已经思考了好几天。在我的特定情况下，有些不起作用的事情是：

height: calc(100% - xx px)，因为标题的高度可变。
在包装器组件中放置所有高个子级作为直接子级（我使用具有某些层的组件

<div class="wrapper">
  <div class="header">
    A header
  </div>
  <div class="container">
    A container
    <div class="with-many">
      Don't scroll
      <div class="divs">
         Scroll
      </div>
    </div>
  </div>
</div>

.wrapper {
  width: 80vw;
  height: 80vh;
  background-color: lightgrey;

  * {
    width: 100%;
  }

  .header {
    height: 30px;
    background-color: orange;
  }

  .container {
    height: 100%;
    background-color: lightgreen;

    .with-many {
      height: 100%;
      overflow-y: auto;
      background-color: green;

      .divs {
        height: 400vh;
        background-color: blue;
      }
    }
  }
}

https://jsfiddle.net/zdb8pmuL/1/

Answer 1

您是这样说的吗？：

.wrapper {
  width: 80vw;
  height: 80vh;
  background-color: lightgrey;
}

.wrapper * {
  width: 100%;
}

.header {
  height: 30px;
  background-color: orange;
}

.container {
  height: 100%;
  background-color: lightgreen;
  display: flex;
  flex-direction: column;
}

.with {
  height: 100%;
  background-color: green;
}

.another-wrapper {
  overflow-y: scroll;
  height: 100%;
}

.divs {
  height: 400vh;
  
  background-color: blue;
}

<div class="wrapper">
  <div class="header">
    A header
  </div>
  <div class="container">
    A container
    <div class="with">
      With many
      <div class="another-wrapper">
        <div class="divs">
          nested divs
        </div>
      </div>
    </div>
  </div>
</div>

嵌套儿童的最大身高为100％

1 个答案: