根据另一个Div[副本]保持高度

添加 position:absolute 给你2号线的所有孩子,所以它不会影响2号线的高度。

.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>

使用此代码

<!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>

我想这会帮助你。。。。