web-dev-qa-db-ja.com

テキスト領域のようにサイズ変更可能なdiv

ブラウザでは、デフォルトでコーナーをドラッグすることにより、テキスト領域のサイズを変更できます。このルールを他の要素（たとえばdiv）に適用できるかどうか疑問に思っていました。私はこの効果がjQuery draggableまたはjQuery-ui resizable関数を使用して達成できることを知っていますが、それに依存することを避けることが可能であれば、プレーンなhtml/cssでそれをやりたいですとしょうかん。このように動作させるためにdivに適用できるCSSルールはありますか？

他の解決策があれば、私はそれを聞きたいです。

htmlcsstextarea
44
codelove

Css3 resize プロパティを使用します。

div {
    resize: both;
}

resize: horizontalとresize: verticalもあります。

現在、クロスブラウザではありません http://caniuse.com/#feat=css-resize

63
sachleen

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>
33
Eswar Rajesh Pinapala