Альтернатива использованию фреймов для предоставления области навигации, размер которой можно изменить, перетаскивая - PullRequest
Новая
       19

Альтернатива использованию фреймов для предоставления области навигации, размер которой можно изменить, перетаскивая

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

В настоящее время у меня есть старый HTML-проект, который использует 3 кадра рядом для отображения навигации, содержимого и свойств.Это позволяет пользователям расширять или сжимать каждую панель, чтобы они могли легко видеть содержимое, если оно становится широким.Фреймы позволяют мне сделать эти панели на всю высоту экрана и позволяют пользователю захватывать и изменять размер.

Я хочу прекратить использование фреймов, поскольку контент не должен поступать с разных страниц, поэтому я хочу создатьмакет, который реагирует так же, как и фреймы:

3 панели отображаются рядом.

Каждая панель может быть захвачена и сделана больше или меньше (ширина), а другие панели будут изменять размер, чтобы заполнить пространство.

Каждая панель будет 100% высоты и ширины экрана.

Я имеюпосмотрел на фреймы, и они этого не делают.Каков мой лучший подход, без необходимости полагаться на jquery для изменения размера или подобного, есть ли способ сделать это со старым добрым div и старым добрым css?

Я пробовал различные способыиспользования iframes, div и не может найти способ сделать это без использования jquery для автоматического / изменения размера div и т. д.

Редактировать: я должен предоставить решение, которое работает в IE \ Edge итакже по возможности работайте в других браузерах.

1 Ответ

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

resize: horizontal;

Недостатки:

  • Не работает с Interner Explorer / Edge ( Совместимость с браузерами )
  • Ручка в углу
  • без JavaScript или загрузки содержимого в iframe изменение размера будет сбрасываться при каждом нажатии на ссылку.

Сложно заставить остальных элементов div использовать оставшееся пространство, поэтому я предлагаю использовать flexbox.

Пример

http://jsfiddle.net/exLy76hu/21/

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
}
.column {
  overflow: auto;
  height: 100%;
}
.resizeable {
  resize: horizontal;
}
#nav {
  width: 200px;
}
#content {
  width: 300px;
}
#properties {
  flex-grow: 1;
}
<div class="column resizeable" id="nav" style="background-color:#88f">
   nav
</div>
<div class="column resizeable" id="content" style="background-color:#ff0">
   content
</div>
<div class="column" id="properties" style="background-color:#0f0">
   properties
</div>
...