有没有办法改变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的照片,目前还有一个装有调整大小工具的角落.任何建议将不胜感激.我很乐意详细说明我可能错过的事情.谢谢!

方框我想调整大小

Answer 1

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

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

为简单起见，我在 JavaScript 中硬编码了宽度和高度。这意味着这些值存在于两个不同的地方，这是不好的。您可能应该只将它们放在 JavaScript 中或只放在 CSS 中，而不是像我所做的那样放在两者中。

我需要将可调整大小的 div 放入填充主体的容器中。否则不会注册可调整大小的 div 之外的“mousemove”事件。如果您的绝对定位的可调整大小的元素“后面”已经有其他内容，这可能不是问题。

供您参考：我最初也尝试使用本机调整大小功能。我曾经transform: rotate(-90deg)将调整大小的角移到右上角，然后放入一个内部 divtransform: 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>

如果您从 Stack Overflow 中运行此代码片段，则需要在单击“运行代码片段”后单击“完整页面”来展开运行视图区域。

Answer 2

这是给你的一个技巧：

.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 方向调整大小。这意味着当你从顶部向下拉时，它不会收缩，而是从底部膨胀。

Answer 3

另一个肮脏的黑客：将direction容器的设置为rtl并且角落将在左侧

.resizable {
    resize: both;
    overflow: auto;
    direction: rtl
}

请记住，您需要在内部 div 中设置directionback to ltr，以便文本按您预期的方式显示：

.content {
    direction: ltr
}