如何使 html 元素及其内容扩展到页面顶部？答案

【问题标题】：How to make an html element expand to the top of the page with it's content?如何使 html 元素及其内容扩展到页面顶部？
【发布时间】：2019-09-17 12:41:39
【问题描述】：

标题几乎说明了一切，当有额外的文本添加到 div 时，它应该保持 div 的底部边框在同一位置，并且顶部边框应该尽可能高以容纳额外的文本。宽度是固定的。
我没有尝试过很多不同的东西，因为我找不到类似的东西。

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

【问题讨论】：

你能举个例子吗？
@Satif 我已经添加了。
请给我一个小提琴：codepen.io
@JasonIsMyName 我从来没有用过小提琴，我可以在那里使用铯，因为我用铯得到了符号的位置吗？
我需要看看你的 CSS。如果您只有一个带有变量的 css 版本，只需将它们保留在那里，我应该能够弄清楚发生了什么，那么至少 c:

标签： html css cesium

【解决方案1】：

通常，当使用绝对定位时，您可以替换为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';

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

【讨论】：

谢谢你，这很好，我必须添加/减去一个恒定数量的像素才能将弹出箭头放在正确的位置。对我来说，这就是答案：mouseOverPopUp.style.right = (viewer.container.clientWidth - entity_pos.x + 50) + 'px'; mouseOverPopUp.style.bottom = (viewer.container.clientHeight - entity_pos.y - 55) + 'px';.
viewer.container 是否占据了整个页面，或者它周围是否有 50/55px 的边距？尝试使用包含弹出窗口的元素，而不是 viewer.containder.clientWidth。如果包含它，也可以尝试document.body。但我很高兴它起作用了。
我目前无法访问代码，但我会尝试一下。

【解决方案2】：

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

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

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

【讨论】：

这对我不起作用，@emackey 的回答解决了这个问题。不过，感谢您抽出时间来回答。