div 可像文本区域一样调整大小

Posted 2023-05-07

【中文标题】div 可像文本区域一样调整大小

【英文标题】：div resizable like text-area

【发布时间】：2012-06-25 05:05:11

【问题描述】：

默认情况下，浏览器允许通过拖动角来调整文本区域的大小。我想知道这条规则是否可以应用于其他元素（例如 div）。我知道可以使用 jQuery draggable 或 jQuery-ui resizable 函数来实现此效果，但如果可以避免依赖该库，我想使用纯 html / css 来实现。我可以将它们应用于 div 以使其以这种方式运行的任何 CSS 规则吗？

如果您有任何其他解决方案，我想听听。

【问题讨论】：

Make <div> resizeable的可能重复

【参考方案1】：

使用 css3 resize 属性。

div 
    resize: both;

还有resize: horizontal和resize: vertical。

---

目前不能跨浏览器http://caniuse.com/#feat=css-resize

【讨论】：

这太棒了，不幸的是它不适用于任何 IE 版本。有没有办法支持对 IE 的这种调整？

您可能还需要overflow: auto;

当我这样做时，所有子元素也会得到句柄。这是为什么呢？

@ErikAigner 那么你需要让你的选择器更具体。

您还必须提供一些overflow 属性，例如overflow: hidden。

【参考方案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>

【讨论】：

很好的答案。您是否有机会知道是否可以在没有 jquery 的情况下做同样的事情，但让您单击以调整大小的手柄，div 的整个侧面？就像在 *** 上一样，当你发布一个主题时，整个底部都可以被占用。