如何使 <div> 可调整大小？答案

【问题标题】：How to make <div> resizeable?如何使 <div> 可调整大小？
【发布时间】：2010-09-28 07:59:12
【问题描述】：

有没有办法让<div> 容器通过拖放来调整大小？

【问题讨论】：

【解决方案1】：

最好的方法是使用 CSS3。它至少被 Webkit 和 Gecko 支持。

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit 和 Firefox 对规范的解释方式不同。在 Webkit 中，大小仅限于设置的宽度和高度。还有一个问题：How can I use CSS to make an element resizable to a dimension smaller than the initial one? 关于这个。

【讨论】：

那只允许你从角落调整大小对吧？
@Irfan 可能如下所示。 .resizable-content { 最小高度：30px;最小宽度：30px；调整大小：两者；溢出：自动；最大高度：适合内容；最大宽度：适合内容； }
右下角调整大小的“grabber”是way to small in Chromium 69 on a 4K monitor，它的样式不能通过CSS访问；您无法将其放大（在撰写本文时）。

【解决方案2】：

div {
  border: 1px solid black;
}

.resizable-content {
  min-height: 30px;
  min-width: 30px;
  resize: both;
  overflow: auto;
  max-height: fit-content;
  max-width: fit-content;
}

&lt;div class="resizable-content"&gt;Resize Me!&lt;/div&gt;

【讨论】：

已经有一个使用 css3 "resize" 的答案。除此之外，能否请您添加一些解释性文字。
我只是想展示如何将 div 的大小调整为低于设置的宽度和高度。因为上面有人说它不是！
这对我不起作用

【解决方案3】：

CSS3-only 方法的问题是只有 div 的右下角变成可拖动的。在尝试通过从 Stack Overflow 复制 code-sn-ps 来尝试做到这一点之后，我强烈建议在您的项目中使用出色的 InteractJS JavaScript library。它允许您轻松创建一个可调整大小（和可拖动）的 div，该 div 可以从各个方面调整大小。

【讨论】：

【解决方案4】：

如果您需要为 mustberesizeable 数组中的每个标签（也是

）执行某个函数 doOnResize(tag) tags，你可以简单地将这个数组复制到window的那个：

window[WIN_RESIZED] = [] // init the window's array
for (var i in tags) {      
  window[WIN_RESIZED].push(tags[i])
}

在那之后

window.addEventListener('resize', function(e){
  for (var i in window[WIN_RESIZED]) {
    doOnResize(window[WIN_RESIZED][i])
  }
})

必须写在开头的某个地方

const WIN_RESIZED = 'move_resized_divs'

具有任意名称，例如 'move_resized_divs'

【讨论】：