滾動使用表格單元格時如何設置動態高度？

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屬性？