时间戳

首页 > 解决方案 > 嵌套子项的最大高度为 100%

html - 嵌套子项的最大高度为 100%

问题描述

是否可以制作一个高度为 100% 的 div，并让内部项目溢出滚动。

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

  1. height: calc(100% - xx px)，因为标题的高度可变。
  2. 将所有高孩子作为直接孩子放在包装器组件中（我使用具有一些层的组件
<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/

标签： htmlcss

解决方案

你的意思是这样吗？：

.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>

推荐阅读