how to set dynamic height while using table-cell with scroll?

Question

I have two div, div1, and div2. div2 height should be changed dynamically according to the height of div1. So I have used table-cell and its working properly, but I can't set scroll function inside div2. To use scroll the height should have to use. But div2 has to change this height with respect to div1 height, so we can,t give the height. So can anyone give the solution for this problem? plunkr

Answer 1

You cannot have both. Either div2 changes dynamically or you have a scroll possibility in div2 because the height is limited.

I used a flexbox because if you want div2 to change dynamically, flexbox does this for you automatically.

 .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> 

In case of scroll possibility, use max-height for div2 and set the 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> 

Finally, you can have a scroll option in div2, when you also have it in div1.

 .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

I think you want like this:-

but for it you need to use 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

If you need the height to adapt in real time, you can check every 'n' seconds the div1 height and change the div2 height.

Try this:

<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>

I think it's what you need. Take a look at this for more info if you want: jquery - How to determine if a div changes its height or any css attribute?