Question

我有两个div，div1和div2。 div2的高度应根据div1的高度动态更改。因此，我已经使用了表格单元及其正常工作，但无法在div2中设置滚动功能。要使用滚动，必须使用高度。但是div2必须相对于div1高度更改此高度，因此我们不能给出高度。因此，有人可以为这个问题提供解决方案吗？plunkr

Answer 1

您不能同时拥有两者。 div2是动态变化的，或者是由于高度受限制而在div2中有滚动的可能性。

我使用了flexbox，因为如果您希望div2动态更改，那么flexbox会自动为您完成此操作。

.container {
  display: flex;
}

.div1 {
  width: 50%;
  background-color: lightblue;
}

.div2 {
  width: 50%;
  background-color: lightgreen;
}

<div class="container">
  <div class="div1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="div2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

如果可能滚动，请将max-height用于div2并设置overflow。

.container {
  display: flex;
}

.div1 {
  width: 50%;
  background-color: lightblue;
}

.div2 {
  width: 50%;
  background-color: lightgreen;
  max-height: 100px;
  overflow: auto;
}

<div class="container">
  <div class="div1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="div2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

最后，当您在div1中也有滚动选项时，就可以在div2中有一个滚动选项。

.container {
  display: flex;
}

.div1 {
  width: 50%;
  background-color: lightblue;
  max-height: 100px;
  overflow: auto;
}

.div2 {
  width: 50%;
  background-color: lightgreen;
  max-height: 100px;
  overflow: auto;
}

<div class="container">
  <div class="div1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <div class="div2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Answer 2

我想你想要这样：-

但是为此，您需要使用Jquery。

$(document).ready(function(){
	var dv1Height = $('.div1').height();
	$('.div2').height(dv1Height);
});

div{ width: 200px; background: #f1f1f1; border:1px solid #ccc; font-size: 48px;}
.div1{ height: 200px;}
.div2{ overflow: scroll;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">This is div 1</div>
<div class="div2">This is div 2<br> This is div 2<br> This is div 2<br> This is div 2</div>

Answer 3

如果您需要实时调整高度，可以每隔n秒钟检查一次div1高度并更改div2高度。

尝试一下：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        #div1{
            background-color: red;
        }
        #div2{
            background-color: green;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div id="div1">
       <textarea></textarea>
    </div>
    <div id="div2">
       Hi<br>
       Hi<br>
       Hi<br>
       Hi<br>
       Hi<br>
       Hi<br>
       Hi<br>
       Hi<br>
       Hi<br>
    </div>
    <script>
        var $element = $("#div1");
        var $div2 = $('#div2');
        var lastHeight = $("#div1").css('height');
        $div2.css('height',lastHeight);
        function checkForChanges()
        {
            if ($element.css('height') != lastHeight)
            {
                lastHeight = $element.css('height'); 
                $div2.css('height',lastHeight);
            }

            setTimeout(checkForChanges, 500);
        }
        checkForChanges();
    </script>
</body>

我认为这就是您所需要的。如果需要，请查看此以获得更多信息： jquery - How to determine if a div changes its height or any css attribute?

如何在使用带有滚动功能的表格单元格时设置动态高度？

3 个答案: