Разделение высоты области просмотра на два деления с регулируемой рамкой - PullRequest
Новая
       9

Разделение высоты области просмотра на два деления с регулируемой рамкой

0 голосов
/ 06 октября 2018

Я бы хотел разделить высоту области просмотра на две div с изменяемой границей.Я думал, что смогу сделать это, используя flex (чтобы элементы заполняли свой контейнер) и установив resize: vertical и overflow: auto в верхнем элементе (чтобы изменить его размер).Тогда я ожидал бы, что нижний элемент изменится соответственно из-за flex.

Но я не могу понять, что это правильно.Этот фрагмент демонстрирует идею, но при изменении размера верхнего элемента граница не перемещается вместе с курсором.(Я проверял это в Firefox 52 и Chromium 69 на Debian Stretch.)

Я знаю о решениях, использующих JavaScript, но я ищу решение только для CSS.Это возможно?Я не обязан использовать flex или resizable. 

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  flex: 1 1 auto;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex: 1 1 auto;
  overflow: auto;
}
<div id="container">
  <div id="A">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. 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.</div>
  <div id="B">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. 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.</div>
</div>

1 Ответ

0 голосов
/ 06 октября 2018

Вам необходимо отключить сжатие для первого элемента.Я думаю, что при изменении размера элемента вы меняете его на новую высоту, и после этого flexbox применяет его эффект сжатия для вычисления другой высоты, поскольку оба элемента имеют размер больше контейнера и отрицательное свободное пространство нужно разделить поровну.Вот почему курсор перемещается вниз (сокращение элемента) 

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  flex-shrink:0;
  height:50%;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}
<div id="container">
  <div id="A">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. 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.</div>
  <div id="B">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. 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.</div>
</div>

Если вы попробуете другой пример, где у нас нет отрицательного свободного места, у вас не будет проблем, и он будет работать без flex-shrink:0, так как flexbox выиграл 'рассчитать новую высоту. 

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  overflow: auto;
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}
<div id="container">
  <div id="A">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 </div>
  <div id="B">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 </div>
</div>

И в этом случае (когда содержимое меньше и у нас есть положительного свободного места ), нам также необходимо отключить flex-grow(т.е. избегайте установки flex-grow), потому что мы получим эффект, аналогичный flex-shrink.Flexbox попытается вычислить новую высоту, чтобы элемент рос, чтобы разделить свободное пространство на равные.В этом случае курсор перемещается наверх (растущий элемент) 

body {
  margin: 0;
}

#container {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

#A {
  background: red;
  overflow: auto;
  flex-grow:1; /*not good*/
  resize: vertical;
}

#B {
  background: blue;
  flex-grow:1;
  overflow: auto;
}
<div id="container">
  <div id="A">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 </div>
  <div id="B">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 </div>
</div>
...