根据另一个Div保持高度[重复]

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了根据另一个Div保持高度[重复]相关的知识，希望对你有一定的参考价值。

这个问题在这里已有答案：

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

现在这个html是这样的假

enter image description here

但我想要的是让Lorem ipsum文本溢出：滚动保持COL2的高度等于COL1像这样

enter image description here

如果Lorem Ipsum文本太短而不能溢出，那么它就会像这样自我克制

enter image description here

保持ADVERTISE在BOTTOM作为Lorem Ipsum可以达到的最大高度。

没有JS可以使用Bootstrap或CSS吗？

附： COL1不具有/不能具有固定高度。

答案

将position:absolute添加到COL2的所有孩子身上，这样就不会对COL2的身高产生影响。

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

我想这会对你有帮助....

以上是关于根据另一个Div保持高度[重复]的主要内容，如果未能解决你的问题，请参考以下文章

根据高度保持div的纵横比[重复]

根据具有更多内容的div动态更改多个div的高度[重复]

使一个 div 的高度填充剩余空间，但不要越过另一个 div [重复]

CSS：保持div的高度相对于其宽度[重复]

使DIV 100％在另一个DIV 100％高度内拉伸高度[重复]

如何根据内容设置iframe的高度[重复]