滚动使用表格单元格时如何设置动态高度？

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> 

如果可能滚动，请对div2使用max-height并设置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-如何确定div是否更改其高度或任何CSS属性？