Div resizable, как текстовая область

Браузеры позволяют изменять размер текстовых областей, перетаскивая их по умолчанию. Мне было интересно, можно ли применить это правило к другим элементам (например, div). Я знаю, что этот эффект может быть достигнут с помощью функции jQuery draggable или jQuery-ui resizable, но я хотел бы сделать это с помощью простого html/css, если можно избежать использования этой библиотеки. Являются ли их любыми правилами CSS, которые я мог бы применить к div, чтобы заставить его вести себя таким образом?

Если у вас есть другое решение, я бы хотел его услышать.

Ответы

Ответ 1

Используйте свойство css3 resize.

div {
    resize: both;
}

Существует также resize: horizontal и resize: vertical.

В настоящий момент перекрестный браузер http://caniuse.com/#feat=css-resize

Ответ 2

Вы можете сделать это с помощью CSS3. Вы можете создать изменяемый пользователем тег div, установив стили изменения размера и переполнения. Я установил размер как горизонтальный, так и вертикальный:

.isResizable {
  background: rgba(255, 0, 0, 0.2);
  font-size: 2em;
  border: 1px solid black;
  overflow: hidden;
  resize: both;
  width: 160px;
  height: 120px;
  min-width: 120px;
  min-height: 90px;
  max-width: 400px;
  max-height: 300px;
}

<div class="isResizable">The quick brown fox jumps over the lazy dog.</div>