4

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 enter image description here

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>
7
  • Try to this way rohitazadmalik.blogspot.in/2014/03/… Commented Dec 21, 2015 at 6:52
  • 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? Commented Dec 21, 2015 at 6:55
  • I don't know the height of first div 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 Commented Dec 21, 2015 at 6:56
  • Your HTML is wrong. Div is unclosed. Commented Dec 21, 2015 at 6:57

1 Answer 1

4

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>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.