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

Hi! Please take the [tour](https://stackoverflow.com/tour) and read through the help center, in particular How do I ask a good question? Your best bet here is to do your research, search for related topics on SO, and give it a go. If you get stuck and can't get unstuck after doing more research and searching, post a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) of your attempt and say specifically where you're stuck. People will be glad to help. — Girisha C, Sep 10 '18 at 09:23

Gerard · Answer 1 · 2018-09-10T09:47:27.840

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>

you caught my point Gerard... consider your snippet.. it has two div, my requirement is div1 and div 2 should be in same height. If div1 extend its height div2 also should extend its height with scrolling inside div2. — swetha, Sep 10 '18 at 09:41

score 0 · Answer 2 · answered Sep 10 '18 at 09:35

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>

score 0 · Answer 3 · answered Sep 10 '18 at 09:42

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?

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

3 Answers3