Css div 溢出

Question

我有 2 个 div，第一个 div 必须调整内容的高度，第二个 div 必须是剩余的高度。第二个 div 必须滚动才能显示所有项目这是模板

这里是我的例子JSFiddle link 我不要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>

Answer 1

在这里。我让第二个 div 至少是 window 高度的 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>

Css div 溢出

Css Divs overflow

html

css

overflow