如何使 html 元素的内容扩展到页面顶部？

Question

标题几乎说明了一切，当向 div 添加额外的文本时，它应该将 div 的底部边框保持在同一位置，并且顶部边框应该上升为根据需要调高以适应额外的文本。宽度是固定的。
我没有尝试很多不同的东西，因为我找不到任何相似的东西。

编辑：我想这样做的原因是因为我想将 html 元素的右下角锚定在我的铯查看器中的某个位置。目前我只是固定了宽度，但我可以对宽度使用相同的东西。右下角应该保持在铯地图上实体旁边的位置。

Answer 1

如果可以设置固定宽度，可以使用 position: fixed:

.tooltip {
  border: 1px solid black;
  bottom: 10px;
  padding: 15px;
  position: fixed;
  right: 10px;
  width: 200px;
}

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adip isicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Answer 2

通常，当使用绝对定位时，您可以换成 bottom 和 right 的某种组合，而不是使用 top 和 left 指定位置。执行此操作时，坐标是从另一侧（分别为底部或右侧）测量的，因此如果您有基于左上角的坐标，则必须从区域的宽度或高度中减去它们。

这是a demo。此处修改的部分如下所示：

    // Set the HTML position to match the entity's position.
    testElement.style.right =
        (viewer.container.clientWidth - position2d.x) + 'px';
    testElement.style.bottom =
        (viewer.container.clientHeight - position2d.y) + 'px';

其余与相同，只是更新为使用right和bottom而不是top和left。

如何使 html 元素的内容扩展到页面顶部？

How to make an html element expand to the top of the page with it's content?

html

css

cesium