如何将动态文本插入具有绝对位置的 div 中？

Question

看看 http://www.barelyfitz.com/screencast/html -training/css/positioning/ 第 6 项。它说：

对于大多数设计来说，这不是一个可行的解决方案，因为我们通常不知道元素中有多少文本，或者将使用的确切字体大小。

为了将动态文本插入具有绝对位置的 div 中，我需要使用什么解决方法？

欢迎任何方法

，

Answer 1

如果您的主要目标是将 div 保持在其位置，而不根据文本量更改其高度或宽度，我会选择：

div {
    overflow: scroll;
}

另一个选项是缩小文本大小以适合 div，但那涉及一定量的模糊数学，您可能会面临文本太小而毫无意义的风险。

如果您希望 div 根据文本更改其高度，这还涉及一些模糊数学，但基本上，您可以通过以下方式获得文本的长度：

var sometext = "Hey, I'm some text!";
var textlength = sometext.length();

并使高度相对于该长度发生变化。您想玩弄数字，但它看起来像：

var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");

Answer 2

请参阅 W3C 网站的视觉效果部分此处

Answer 3

也许对动态文本容器使用 "overflow: auto" div.所以高度不是问题。

Answer 4

问题不在于将动态文本放在绝对定位的 div 中 - div 将扩展以适应其中的任何文本。在您的示例中，红色和绿色 div 没有定义高度。

绝对定位的 div 会从文档流中取出，因此 html 中出现在它们之后的任何内容都会表现得好像它们根本不存在一样。

使用绝对定位 div 的设计需要在包含的 div 上定义高度，以便绝对定位 div 不会与其他内容重叠。在您的示例中

定义的高度为 250px。将其更改为 100px，您将看到

移动到红色和绿色 div 下方。

因此，如果侧边栏中有一个绝对定位的 div，后面没有任何内容，则可以添加所需的所有动态文本。如果你的标题中有一个，它将使你的设计实现起来非常复杂。