Question

因此，我的父div中有2个子div。我想做的是让左手的孩子div确定父母的身高。然后让第二个右侧子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>

如何让一个孩子的div确定父母的身高，并用滚动条迫使另一个孩子的div适应父母的身高

1 个答案: