html - 你如何让一个 child div 确定 parent 的高度并用滚动条强制第二个 child div 适应 parent 的高度

Question

所以我在父 div 中有 2 个子 div。 我想要做的是让左手的 child div 确定 parent 的高度。然后让第二个右侧的子 div 始终与父级高度相同，无论其中有多少内容。 如果我可以硬编码左手子 div 的大小，这将非常容易，但是由于文本在其中，左手子可以有不同的高度

见附件代码。

目前右侧使父级比左侧大。 我想要的最终结果是无论您将左侧文本区域设置多大，它始终是父级的高度。

https://jsfiddle.net/e29o6jnz/

<script>
#topDiv {
  background-color: lightblue;
    max-height: 17rem;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

#insideDiv1 {

}

#insideDiv2 {
    background-color: pink;
    overflow-y: auto;
    height: auto;
}
</script>

<div id="topDiv">
  <div>
    No scroll content
  </div>
    <div id="insideDiv1">
    <textarea style="margin: 0px; width: 171px; height: 131px;">hello</textarea>
  </div>
  <div id="insideDiv2" style="">
    Some inside content
     More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br> More inside content
    <br><br>
  </div>
</div>

Answer 1

我们不能只用 css 来完成这个任务。为此，我们需要用js获取左子div高度，并将其分配给右子max-height，并分配给父div高度。

jQuery(document).ready(function(){
   $('textarea').mouseup(function(){
      var height = $(this).parent().height();

      $(this).parents().find('.parent').height(height);
      $(this).parent().next().css({'max-height' : height});
   });
   });

 .parent{ max-width:700px; border:solid 3px #ff0000; float:left; width:100%; position:relative;   }
    .right-child , .child-left{ width:40%; float:left;}
    .right-child{ overflow:auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div class="parent">
<div class="child-left">Lorem Ipsum is simply dummy text of the printing and    <textarea style="margin: 0px; height: 144px; width: 100%;"></textarea></div>
<div class="right-child">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>

</div>