Html div 可以像文本区域一样调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11163981/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
div resizable like text-area
提问by codelove
Browsers allow text-areas to be re-sized by dragging their corner by default. I was wondering if this rule could be applied to other elements (a div for instance). I know this effect could be achieved using the jQuery draggableor the jQuery-ui resizablefunction, but I would like to do it with plain html / css if it is possible to avoid relying on that library. Are their any CSS rules that I could apply to a div to make it behave in this way?
默认情况下，浏览器允许通过拖动文本区域的角来重新调整文本区域的大小。我想知道这个规则是否可以应用于其他元素（例如 div）。我知道可以使用 jQuerydraggable或 jQuery-uiresizable函数实现这种效果，但是如果可以避免依赖该库，我想使用纯 html/css 来实现。他们的任何 CSS 规则是否可以应用于 div 以使其以这种方式运行？
If you have any other solution I would like to hear it.
如果您有任何其他解决方案，我想听听。
回答by sachleen
Use the css3 resizeproperty.
使用 css3resize属性。
div {
resize: both;
}
There is also a resize: horizontaland resize: vertical.
还有一个resize: horizontaland resize: vertical。
Not currently cross browser http://caniuse.com/#feat=css-resize
回答by Eswar Rajesh Pinapala
You can do this using CSS3. You can create a user resizable divtag by setting the resize and overflow styles.
I have set resize to both horizontal and vertical here:
你可以使用 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>