CODEWITHSUNDEEP
htmlcss
yavg
yavg

Reputation: 3061

Assign height to one element relative to another in css

I have 2 divs. The first div has a content, which can vary, ie I can not assign its height in the css. That's why I always put it like: Height: auto; The content of div1 is dynamic then the height varies.

I have a second div that will usually have more text than the div1. I want the div 2 to fit the height of div1, and to have a scroll bar on the y-axis. The scroll should only be in div2 How can I do it?

https://jsfiddle.net/7jcozszx/

.div1{
  background:blue;
  height: auto;
  width: 300px;
  display:inline-block;
  float:left;
}

.div2{
  background:red;
  height: 300px; /*height of div1 */
  width: 300px;
  display:inline-block;
  overflow-y:scroll;
}
<div class='div1'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!
</div>

<div class='div2'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sint 
  cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad 
  deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id 
  quidem nemo!
</div>

Upvotes: 1

Views: 197

Answers (4)

Danield
Danield

Reputation: 125651

Set the second div with position:absolute; and height:100%

This way, only the first div controls the height of the container.

body {
  position: relative;
}

.div1 {
  background: blue;
  width: 300px;
}

.div2 {
  background: red;
  width: 300px;
  height: 100%;
  position: absolute;
  left: 300px;
  top: 0;
  overflow-y: auto;
}
<div class='div1'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
</div>

<div class='div2'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
  sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
</div>

Updated fiddle

Upvotes: 1

blecaf
blecaf

Reputation: 1645

I change you html by putting div2 inside div1. The made it absolute to div2. By this div2 takes the height of div1. Look at the code below for more understanding. You could use flexbox also.

.div1{
  background: blue;
    height: 100%;
    width: 300px;
    display: inline-block;
    float: left;
    position: relative;
}

.div2{
    background: red;
    /* max-height: 300px; */
    width: 300px;
    display: inline-block;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    right: -300px;
    bottom: 0;
}
<div class='div1'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!

<div class='div2'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
</div>
</div>

Upvotes: 0

Babar Al-Amin
Babar Al-Amin

Reputation: 3984

If you don't want to set a fixed height for div1's height, then you can use JS to calculate the height of div1 and apply it to div2.

document.querySelector('.div2').style.height = document.querySelector('.div1').offsetHeight

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167250

I'd use FlexBox for this.

.container {
  display: flex;
}

.div1 {
  background: blue;
  width: 300px;
}

.div2 {
  background: red;
  height: 300px;
  width: 300px;
  overflow-y: scroll;
}
<div class="container">
  <div class='div1'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!
  </div>

  <div class='div2'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
  </div>
</div>

Make sure you just add a .container.

Preview

preview

FlexBox Browser Support: http://caniuse.com/flexbox

Upvotes: 1

Related Questions