我有两个 div，div1 和 div2。 div2 的高度应该根据 div1 的高度动态改变。所以我已经使用了table-cell并且它工作正常，但是我不能在div2中设置滚动功能。要使用滚动高度应该必须使用。但是 div2 必须相对于 div1 的高度来改变这个高度，所以我们不能给出高度。那么有谁能给出这个问题的解决方案吗？plunkr
【问题讨论】：
我想你想要这样：-
但你需要使用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>【讨论】：
如果您需要高度实时适应，您可以每隔 '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?
【讨论】：
你不能两者兼得。要么 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>【讨论】：