调整元素大小的问题,该元素在右侧是固定位置

时间:2018-11-04 19:07:23

标签: css css3 resize css-position draggable

我有一个div,它从窗口右侧的固定位置开始,但是它是可拖动的(使用javascript)和可调整大小的(使用css)。问题是,如果首先调整div的大小(抓住右下角),它将无法正确调整大小。它将从右侧保持其固定位置,然后从左侧开始增大或缩小。但是,如果首先拖动div,则调整大小将按预期进行。这些是div的当前CSS属性:

#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

演示:

https://jsfiddle.net/mravdo52/2/

我尝试了各种解决方法。由于div的移动似乎可以使resize正常工作,因此我尝试在加载元素后仅将div移动一个像素,但这是行不通的,因为我认为两个元素之间存在计时问题元素的负载,javascript的执行以及CSS的负载。随后,我尝试使用jQuery promise()queue()先应用css,然后再移动元素,但这些都不起作用。我也尝试过使用jQuery UI resizable(),但似乎根本没有调整大小。我目前还没有主意,不胜感激。

1 个答案:

答案 0 :(得分:1)

仅CSS解决方案: 您只需要最初将赋予固定位置的div。

解决方案说明: 之所以在拖动元素后工作是因为它应用了左位置,所以我们可以在拖动元素之前给出左位置,这样它就可以工作!

首先尝试提供left: auto/initial/inherit,但没有成功。 因此,您可以输入以下内容:左:calc(100%-120px);

(120像素代表右位置30像素与div宽度90像素之和)

#resize {
  position: fixed;
  right: 30px;
  left: calc(100% - 120px);
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

更新的小提琴:https://jsfiddle.net/mravdo52/6/