Css Divs overflow

Question

I have 2 divs, first div must adapt height about content and second div must be height the remnant. The second div must scroll to show all items This is the template

here my example JSFiddle link I don't want javascript, only 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>

This can be achieved via CSS if you provide one answer: what happens to the second div when the first one is 100% of viewport height? How tall will it be? — tao
– tao, Commented Dec 21, 2015 at 6:55
the first div will be always less height than page size, it will be about 200 or 250 px, no more — Mauro Sala
– Mauro Sala, Commented Dec 21, 2015 at 6:56

tao · Accepted Answer · 2015-12-21 07:19:52Z

Here it is. I made the second div be at least 35% of window height. If you want the min height of second div to be higher or smaller, adjust the 65vh on the wrapper. (100vh is the viewport and what's not wrapper height is second div height).

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>

Collectives™ on Stack Overflow

Css Divs overflow

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related