CSS中的Div溢出问题

Question

我有两个div，第一个div必须根据内容自适应高度，第二个div必须是剩余空间的高度。 第二个div必须滚动以显示所有项目。 这是模板： 这是我的示例：JSFiddle链接 我不想使用JavaScript，只用CSS。

<div class="tbl">
  <div class="header">
    <p>1</p>
    <p>2</p>
  </div>
  <div class="body">
    <div class="in-body">
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
        <p>10</p>
    </div>
  </div>
</div>

- Mauro Sala

---

尝试这种方式：http://rohitazadmalik.blogspot.in/2014/03/section-have-fixed-position-when-it.html - Rohit Azad Malik

如果您提供一个答案，这可以通过CSS实现：当第一个div的视口高度为100％时，第二个div会发生什么？它将有多高？ - tao

我不知道第一个 div 的高度。 - Mauro Sala

第一个 div 的高度始终小于页面大小，大约为 200 或 250 像素，不超过此范围。 - Mauro Sala

这里是编辑过的 jsfiddle，第一个 div 有嵌入项，我不知道页面的宽度。 - Mauro Sala

Answer 1

这就是代码。我让第二个 div 至少占窗口高度的 35%。如果你想让第二个 div 的最小高度更高或更低，请调整包装器上的 65vh。（100vh 是视口，不属于包装器高度的部分是第二个 div 的高度）。

body {
  margin: 0;
}
.wrapper {
  width: 35%;
  max-height: 65vh;
  position: relative;
}
.first,
.second {
  width: 100%;
  color: white;
  padding: 15px;
  box-sizing: border-box;
}
.first {
  background-color: green;
}
.second {
  background-color: blue;
  position: absolute;
  height: calc(100vh - 100%);
  top: 100%;
  overflow-y: auto;
}

<div class="wrapper">
  <div class="first">
    kitsch flannel direct trade listicle ramps truffaut.
  </div>
  <div class="second">
    Brunch fingerstache bespoke squid neutra. Cred hella meh, slow-carb kale chips fashion axe vinyl keytar banjo butcher ethical affogato taxidermy. Bicycle rights venmo lomo truffaut. Art party kickstarter vice, truffaut yr 90's farm-to-table. Banh mi try-hard
    distillery, next level mumblecore jean shorts sustainable drinking vinegar squid banjo 3 wolf moon. Slow-carb waistcoat fashion axe, try-hard kinfolk flexitarian hella pitchfork semiotics truffaut blue bottle stumptown. Asymmetrical skateboard distillery
    chambray.
  </div>
</div>

- tao