Изменение высоты нескольких divs динамически в зависимости от div с большим количеством контента

У меня есть раздел, внутри двух разделов. Любой из этих подразделов мог бы определить размер другого.

И я составил быстрый код здесь: http://codepen.io/anon/pen/QyZbev

.outersection {
  width: 100%;
  overflow: scroll;
  height: 100vh;
}

.group-section {
  display: block;
  border: blue 1px solid;
  padding: 5px 0;
  height: 100%;
}

.code, .documentation {
  width: 50%;
  display: inline-block;
  border: 1px solid green;
  height: 100%;
  overflow: auto;
}

Я пробовал это только с JQuery и CSS, но будет больше двух из этих разделов, каждый из которых должен иметь разную высоту. Ни одна попытка не работала, и я не уверен, что способ JQuery достаточно динамичен для всех разделов.

Проблема в том, что обе стороны не совпадают с высотами, а затем стороны кажутся плавающими повсюду. Они не заполняют секцию кодирования, и divs, похоже, переключают стороны, на которые они плавают.

Спасибо заранее!

Ответ 1

Используйте flexbox.

Если вы перейдете на display: flex; в .group-section, они заполнит свое пространство. Из-за значений по умолчанию элементы будут растягиваться по умолчанию и затем растянуться. Вам также необходимо удалить 100% -ную высоту кода и документации, так как это необходимо и заставляет мелкие предметы оставаться маленькими.

Вероятно, вы должны переписать css, чтобы больше соответствовать гибкости. При правильном использовании flexbox вам не нужно знать, сколько секций прибывает.

Если вы не знакомы с flexbox, вы можете прочитать это.

Ответ 2

Я добавил класс auto-height ко всем элементам, которые должны быть равны по высоте. Затем я написал небольшую функцию jQuery, которая вычисляет, какой элемент является наибольшим, и устанавливает все из них на эту высоту.

function thisHeight(){
    return $(this).height();
}
$('.group-section').each(function(){
    var height = Math.max.apply(Math, $(this).find('.auto-height').map(thisHeight));
    $(this).find('.auto-height').height(height);
});

Здесь pen.

Ответ 3

Попробуйте что-то простое, например flexbox: -

<div class="flex">
<article>
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
<article class="third">
<p>blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb blurb
</p>
</article>
</div>

CSS

    .flex {
    display: flex;
    flex-flow: row nowrap;
    width: 400px;
}
article{
  border:1px solid black;
  flex: 2 2 60%;
  width: 60%;
  box-sizing: border-box;
  display: flex;
  flex-flow: row nowrap;
}
article.third{
    flex: 1 1 30%;
    width: 32%;
}

Ответ 4

Итак, кажется, проблема в том, что внутренние элементы или, по крайней мере, некоторые из них имеют float влево или вправо. Это нормально, но элементы с плавающей точкой необходимо очистить, иначе они не будут реально взаимодействовать с остальными элементами. Чтобы исправить вашу проблему, я предлагаю добавить этот общий класс к вашему css и применить его к контейнерам:

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}