Maintaing Height according to another Div

Question

.col-6 h1 {
  color: white;
  text-align: center;
}
h1 {
  background-color: red;
}

.COL1, .COL2 {
  border: 1px solid red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<br></br>
<div class='container'>
  <div class='row'>
    <div class='col-6 COL1'>
      Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.
    </div>
    <div class='col-6 COL2'>
      <h1>ADVERTISE</h1>
      <div>Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.</div>
      <h1>ADVERTISE</h1>
    </div>
  </div>
</div>

Right Now this HTML is false like this

But What I want is to make Lorem ipsum text gets overflow:scroll To keep the Height of the COL2 equal to COL1 like this

And if the Lorem Ipsum text is too short not to make an overflow, Then it just gets over itself like this

keeping ADVERTISE at the BOTTOM as the Max-Height the Lorem Ipsum can reach.

Is that possible using Bootstrap or CSS without JS?

P.S. COL1 doesn't/can't have a Fixed-Height.

score 1 · Accepted Answer · answered Mar 01 '18 at 02:37

Add position:absolute to all child of your COL2 so it will can not make effect to COL2's height.

.col-6 h1 {
  color: white;
  text-align: center;
}

h1 {
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  height: 50px;
  margin: 0 !important;
}

.COL1,
.COL2 {
  border: 1px solid red;
}

.COL2 .top-banner {
  top: 0;
}

.COL2 .bottom-banner {
  bottom: 0;
}

.COL2 div {
  position: absolute;
  top: 50px;
  left: 0;
  bottom: 50px;
  right: 0;
  overflow: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class='container'>
  <div class='row'>
    <div class='col-6 COL1'>
      Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper
      curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh
      habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.
    </div>
    <div class='col-6 COL2'>
      <h1 class="top-banner">ADVERTISE</h1>
      <div>Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper
        curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi
        nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.</div>
      <h1 class="bottom-banner">ADVERTISE</h1>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Mar 01 '18 at 02:15

Use This code

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <style type="">
    .col-6 h1 {
  color: white;
  text-align: center;
}
h1 {
  background-color: red;
}

.COL1, .COL2 {
  height: 250px;
  border: 1px solid red;
}

#overflow{
  height: 145px;
  overflow: scroll;
}
section{
  height: 250px;
}
</style>
</head>
<body>
  <section>
    <div class='container'>
    <div class='row'>
      <div class='col-6 COL1'>
        Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.
      </div>
      <div class='col-6 COL2'>
        <h1>ADVERTISE</h1>
        <div id = overflow>Lorem ipsum dolor sit amet consectetur adipiscing elit risus conubia ante, congue faucibus ac a non aptent nisi per commodo facilisi id, tempus lacus maecenas tincidunt mus sociosqu elementum ornare eget. Nascetur vestibulum hac tempor integer semper curae tempus etiam massa, platea fusce pellentesque aenean conubia at lectus non penatibus, nibh venenatis himenaeos scelerisque placerat imperdiet dignissim felis. Feugiat fames lectus magna aenean porttitor taciti hendrerit, integer facilisi nibh habitant dignissim sollicitudin aliquam, massa faucibus dictumst maecenas rhoncus sapien.</div>
        <h1>ADVERTISE</h1>
      </div>
    </div>
  </div>
  </section>


</body>
</html>

I think this will help you....

Tried it, It gives `COL2` a fixed height, But not equal to `COL1` height — Toleo, Mar 01 '18 at 02:28
just copy the code and paste it and then run.... i tested it works well both have same height — narayan maity, Mar 01 '18 at 02:35

Maintaing Height according to another Div

2 Answers2

Use This code