有没有办法改变CSS调整大小角落的位置？

Question

所以这是一个奇怪的问题。使用可调整大小的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的问题与当前具有调整大小工具就可以了盒装的一角的照片。任何建议将不胜感激。我很乐意详细说明我可能错过的事情。谢谢！

Box I want to resize in question

Answer 1

这里的一个出发点。我基本上在右上角创建了一个自定义大小调整图标。然后，我使用'mousedown'，'mousemove'和'mouseup'事件来跟踪调整大小活动。您可以使用“拖曳”和相关事件来做类似的事情。

请注意'mousedown'位于缩放图标上，而'mousemove'和'mouseup'位于文档正文（或可调整大小的div后的其他较大元素）上。

为了简单起见，我在JavaScript中对宽度和高度进行了硬编码。这意味着这些价值存在于两个不同的地方，这是不好的。你应该只把它们放在JavaScript中，或者只放在CSS中，而不是像我一样。

我需要将可调整大小的div放入充满人体的容器中。否则，可调整div以外的'mousemove'事件未被注册。如果您已将其他内容“隐藏”在绝对定位的可调整大小的元素后面，则这可能不是问题。

对于您的信息：我最初也尝试使用本机调整大小功能。我使用transform: rotate(-90deg)将调整大小的角落移动到右上角，然后放入一个内部div与transform: rotate(90deg)以使内部内容再次右移。但是，虽然这将调整大小的角落放在正确的位置，但调整大小本身已经完全搞砸了，因为鼠标移动和实际调整大小本身已经偏离了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>

如果运行堆栈溢出内此代码段，您需要通过单击“全页面”点击“运行代码片段”后，扩大运行视图区域。