css - 通过滚动将 div 锚定在另一个 div 中

Question

我试图将一个 div 锚定到另一个 div 的右下角。只要父 div 没有滚动， anchor 就可以工作。一个工作的 JSFiddle 已设置 Here .水平滚动 div 后，调整大小的 handle 也会移动。

从这里可以看出，调整大小句柄的 css 是使用 botton 和 right 属性锚定的。

ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}

如何实现滚动后的 anchor 效果？

Answer 1

这有点 hack，但如果你用包装器包装可滚动的 div 并将包装器设置为可调整大小，它就可以很好地工作。

$("#wrapper").resizable();

#test {
  width: calc(100% + 15px);
  height: calc(100% + 15px);
  background-color: lightgray;
  overflow: scroll;
}

#wrapper {
  width: 185px;
  height: 185px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<div id="wrapper">
  <div id="test">
    <p> this is going to be a very long text !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
  </div>
</div>

为了保留您想要的效果，我将 #wrapper 设置为设置的宽度和高度，同时允许 #test 以 100 的宽度和高度填充它的父级%。要将句柄移回 #test，我将 #wrapper 设置为小于您原来的值，并使 #test 与计算()。我认为这会给出您正在寻找的结果。

当然，如果您不介意位于 #test 外面的句柄，您可以在 #wrapper 上将高度和宽度保留为 200，在 #测试。或者您可以找到一种方法来覆盖 jqueryUI.css 文件中的 css。无论哪种方式， handle 都能很好地固定到位。