所以这是一个奇怪的问题。使用可调整大小的div对Web应用程序进行编程。我现在正在使用CSS resize属性，因为它似乎是最简单的方法。问题是我的盒子有一个锁定的底部和左侧位置（我想要保持），但默认选择的调整大小角是右下角，这会产生奇怪的结果来调整顶部的大小。在网上看了看但无法找到将角落移到右上角而不是右下角的方法。关于如何产生这个结果的任何建议？也不反对使用不同的调整大小的方法。这是当前应用于框的样式：
display: block;
font-size: 9pt;
position: absolute;
bottom: 50px;
left: 20px;
padding: 10px;
min-height: 0;
min-width: 0;
border: solid 1px black;
width:400px;
height:400px;
resize: both;
overflow-x: auto;
overflow-y: hidden;
这里有一张div的照片，上面有一个角落，当前它上面装有调整大小的工具。任何建议将不胜感激。我非常乐意详细说明我可能也错过的事情。谢谢！
答案 0 :(得分：3)
另一种肮脏的技巧：将容器的direction设置为rtl，角落将在左侧
.resizable {
resize: both;
overflow: auto;
direction: rtl
}
请记住，您需要在内部div中将direction设置回ltr，以便显示文本，如您所愿：
.content {
direction: ltr
}
答案 1 :(得分：1)
这是一个起点。我基本上在右上角创建了一个自定义调整大小图标。然后我使用'mousedown'，'mousemove'和'mouseup'事件来跟踪调整大小的活动。您可以使用“拖动”和相关事件来执行类似操作。
请注意，“mousedown”位于resize图标上，而“mousemove”和“mouseup”位于文档正文（或可调整大小的div后面的其他较大元素）。
为了简单起见，我在JavaScript中对宽度和高度进行了硬编码。这意味着这些价值存在于两个不同的地方，这是不好的。您应该只将它们放在JavaScript中或仅放在CSS中，而不是像我一样放在两者中。
我需要将可调整大小的div放入一个充满身体的容器中。否则，可调整大小的div之外的'mousemove'事件未被注册。如果您已将其他内容“置于”绝对定位的可调整大小元素之后，这可能不是问题。
供您参考：我最初也尝试使用原生调整大小功能。我使用transform: rotate(-90deg)将调整大小角移动到右上角，然后使用transform: rotate(90deg)放入内部div，以使内部内容再次向右移动。然而，虽然这会将调整大小的角落放在正确的位置，但调整大小本身完全搞砸了，因为鼠标移动和实际调整大小本身都偏离了90度。用文字描述有点难，但只要说一点，没有一些重大的工作（或者可能是一些精彩的代码或隐藏的功能），我就无法使这种策略发挥作用。
var
doc = document,
ht = 400,
wd = 400,
main = document.querySelector("#resizable"),
x, y, dx, dy;
var startResize = function(evt) {
x = evt.screenX;
y = evt.screenY;
};
var resize = function(evt) {
dx = evt.screenX - x;
dy = evt.screenY - y;
x = evt.screenX;
y = evt.screenY;
wd += dx;
ht -= dy;
main.style.width = wd + "px";
main.style.height = ht + "px";
};
rsz.addEventListener("mousedown", function(evt) {
startResize(evt);
doc.body.addEventListener("mousemove", resize);
doc.body.addEventListener("mouseup", function() {
doc.body.removeEventListener("mousemove", resize);
});
});#container {
position: absolute;
border: solid red 1px;
margin: 0;
height: 100%;
width: 100%;
}
#resizable {
display: block;
font-size: 9pt;
position: absolute;
bottom: 50px;
left: 20px;
padding: 10px;
min-height: 0;
min-width: 0;
border: solid 1px black;
width: 400px;
height: 400px;
overflow-x: auto;
overflow-y: hidden;
}
#rsz {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background-color: rgba(255, 0, 0, 0.5);
}
#original {}<div id="container">
<div id="resizable">
<div id="rsz"></div>
(some content)
</div>
</div>
如果您从Stack Overflow中运行此代码段，则需要在单击“运行代码段”后单击“整页”来展开正在运行的视图区域。
答案 2 :(得分：1)
只是从 Andrew Willems 到 JS 类的重构解决方案，也可以保持全局范围干净，并能够将其应用于多个 div
如果您从 Stack Overflow 中运行此代码片段，则需要在单击“运行代码片段”后单击“完整页面”来展开运行视图区域。
class Resizehandler {
constructor(targetDivID, pullTabID) {
var d = document;
var pullTab = d.getElementById(pullTabID);
this.target = d.querySelector(targetDivID);
this.ht = 400; this.wd = 400;
this.x = 0; this.y = 0;
this.dx = 0; this.dy = 0;
var resizeFn = this.resize.bind(this);
pullTab.addEventListener("mousedown", (evt) => {
this.x = evt.screenX;
this.y = evt.screenY;
d.body.addEventListener("mousemove", resizeFn);
d.body.addEventListener("mouseup", () => {
d.body.removeEventListener("mousemove", resizeFn);
});
});
}
resize(evt) {
this.dx = evt.screenX - this.x;
this.dy = evt.screenY - this.y;
this.x = evt.screenX;
this.y = evt.screenY;
this.wd += this.dx;
this.ht -= this.dy;
this.target.style.width = this.wd + "px";
this.target.style.height = this.ht + "px";
};
}
new Resizehandler("#resizable", "rsz");#container {
position: absolute;
border: solid red 1px;
margin: 0;
height: 100%;
width: 100%;
}
#resizable {
display: block;
font-size: 9pt;
position: absolute;
bottom: 50px;
left: 20px;
padding: 10px;
min-height: 0;
min-width: 0;
border: solid 1px black;
width: 400px;
height: 400px;
overflow-x: auto;
overflow-y: hidden;
}
#rsz {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background-color: rgba(255, 0, 0, 0.5);
}
#original {}<div id="container">
<div id="resizable">
<div id="rsz"></div>
(some content)
</div>
</div>答案 3 :(得分：0)
这是给您的骇客：
.outer-ne-resize {
resize: both;
overflow: auto;
}
.inner-ne-resize,
.outer-ne-resize {
transform: rotateX(180deg);
height: 100%;
width: 100%;
}
.content {
height: 100%;
background-color: lightgray;
}<div class="outer-ne-resize">
<div class="inner-ne-resize">
<div class="content">
<p>Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
Lorem ipsum content Lorem ipsum content Lorem ipsum content.
</p>
</div>
</div>
这种hack的问题在于，它仍然沿相同的nwse方向调整大小，如光标所示。这意味着当您从顶部下拉时，它不会收缩，而会从底部扩展。
答案 4 :(得分：0)
几年后，仍在寻找实现此目标的方法。
我现在找到了一种方法，可以使用右上调整锚来调整右下定位元素的大小。
它似乎在chrome中可以正常工作，但是它取决于任何标准中都没有定义的行为，因此，除非您可以控制哪些客户端/浏览器，否则最好不要依赖于任何生产环境使用此代码。
完整示例，并在此处提供说明： https://jsfiddle.net/ElMoonLite/zvok7p1f/
核心代码：
<div class="bottomright-with-nw-resize-outer">
<div class="bottomright-with-nw-resize-inner">
Lorem ipsum content Lorem ipsum content Lorem ipsum content.<br>
Lorem ipsum content Lorem ipsum content Lorem ipsum content.
</div>
</div>
.bottomright-with-nw-resize-outer {
transform: rotateZ(180deg);
resize: both;
overflow: auto;
padding: 0 8px 8px 0;
position: fixed;
bottom: 10px;
right: 10px;
height: 100px;
width: 100px;
}
.bottomright-with-nw-resize-inner {
transform: rotateZ(180deg);
width: 100%;
height: 100%;
overflow: auto;
}
答案 5 :(得分：0)
这是一个内联版本，其工作方式与我希望向右拖动的锚点相似。 请注意，它在我想要的右上方有两个手柄，在垂直轴的底部有两个手柄。
关于垂直滚动的注意事项
.vertical-scroll {//也可以用作多个x-flip和x-flipback元素的包装
最低高度：20px； //这可以防止与负数重叠
调整大小：垂直；
溢出：自动; //如果未设置height属性，则直到用户输入之前此定义均未定义
}
甚至取消垂直滚动类。
.resize-x-handle-flip {
transform: rotateX(180deg);
resize: horizontal;
overflow: auto;
width: 200px;
background:lightcyan;
}
.x-text-flip-back {
transform: rotateX(180deg);
}
.vertical-scroll {
min-height:20px;
resize:vertical;
overflow:auto;
}<div class="resize-x-handle-flip">
<div class="x-text-flip-back">
<div class="vertical-scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.<br> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</div>
</div>
</div>