Как установить динамическую высоту при использовании ячейки таблицы с прокруткой?

У меня есть два div, div1 и div2. Высота div2 должна динамически изменяться в соответствии с высотой div1. Итак, я использовал table-cell и работал правильно, но я не могу установить функцию прокрутки внутри div2. Для использования прокрутки высоту надо использовать. Но div2 должен изменить эту высоту относительно высоты div1, поэтому мы можем указать высоту. Так может ли кто-нибудь дать решение этой проблемы? Plunkr

Привет! Пожалуйста, возьмите тур и прочтите справочный центр, в частности, Как мне задать хороший вопрос? Лучше всего здесь провести исследование, поискать связанные темы на SO и попробовать. Если вы застряли и не можете оторваться после дополнительных исследований и поиска, опубликуйте Минимальный, полный и проверяемый пример своей попытки и конкретно укажите, где вы застряли. Люди будут рады помочь.

Girisha C 10.09.2018 11:23
0
1
50
3

Ответы 3

У вас не может быть и того, и другого. Либо 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>

Наконец, у вас может быть опция прокрутки в div2, если она у вас также есть в 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>

вы уловили мою точку зрения, Джерард ... рассмотрите свой фрагмент ... он имеет два div, мое требование - div1 и div 2 должны быть на одной высоте. Если div1 увеличивает свою высоту, div2 также должен увеличивать свою высоту с помощью прокрутки внутри div2.

swetha 10.09.2018 11:41

Я скорректировал свой ответ, чтобы лучше объяснить.

Gerard 10.09.2018 11:51

Думаю, ты хочешь вот так: -

но для этого нужно использовать 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 - Как определить, меняет ли div свою высоту или какой-либо атрибут css?

Другие вопросы по теме