如何让 position:absolute <div> 展开，就好像它包含一个长 <p>答案

【问题标题】：How to let position:absolute <div> expand, as if it contained a long <p>如何让 position:absolute <div> 展开，就好像它包含一个长 <p>
【发布时间】：2017-02-18 01:38:34
【问题描述】：

此div 扩展为包含p。如果段落比页面长，则段落换行并且 div 填充整个宽度。如何让 div 以这种方式填充页面而不包含段落？

<div style="position:absolute;left:256px;background-color:blue;">
  <p>bla bla bla bla bla bla bla bla bla</p>
</div>

这是一个 js 小提琴：https://jsfiddle.net/qbu0u1s6/2

【问题讨论】：

你的意思是把宽度设为 100%？
在答案中添加了更广泛的评论
@TarlanMammadzada 谢谢你，你是对的 width:100% 在这种情况下有效，抱歉简化了太多！当 div 内还有 width:100% 的其他元素时，它不起作用，因为它们变得太宽。我在 jsfiddle 中添加了一个这样的案例。
我现在的工作是在 div 的末尾放置一个不可见的（白底白字）长段落，但我当然想用 CSS 来解决这个问题。

标签： html css width css-position

【解决方案1】：

<div style="position:absolute;left:256px;background-color:blue;">
  <p>
    bla bla bla bla bla bla bla bla bla 
  </p>
</div>

<div style="position:absolute;top:100px;left:256px;background-color:blue;word-wrap: wrap-word;">
  <p>
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
  </p>
</div>

<div style="position:absolute;top:200px;text-align: center;background-color:blue;width:100%;word-wrap: wrap-word;">
  <p style="width:100%">
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
  </p>
</div>

问题是，当您将宽度设置为 100% 并设置为 256px 时，div 将获得屏幕宽度的 100% 并从左侧 256px 开始

为了防止它只需更改left:256px;

为了将其与中间对齐使用text-align: center;

<div style="position:absolute;left:256px;background-color:blue;">
  <p>
    bla bla bla bla bla bla bla bla bla 
  </p>
</div>

<div style="position:absolute;top:100px;left:256px;background-color:blue;word-wrap: wrap-word;">
  <p>
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
  </p>
</div>

<div style="position:absolute;top:200px;background-color:blue;left: 256px; width:calc(100%-256px);word-wrap: wrap-word;">
  <p style="width:100%">
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
    bla 0 bla 1 bla 2 bla 3 bla 4 bla 5 bla 6 bla 7 bla 8 bla 9 
  </p>
</div>

如果你仍然想要left: 256px，那么在css中使用calc()函数

它将从 100% 的宽度减少 256px，并给 div 上面的宽度

如果您希望下面 div 中的文本居中，请将text-align: center 标记为<p>。

【讨论】：

您好 Advaith，感谢您的回答！我希望 div 左侧的 256px 是空闲的，所以我不能删除 left:256px。我试图获得与小提琴中的第二个 div 相同的宽度，即文本换行的地方，但也适用于不包含长段落的 div。
@ANNA 所以你想让第二个 div 居中？
@Anna 我已经编辑了我的代码。请检查这对您是否有用

【解决方案2】：

尝试使用 calc 将宽度设为 100%：

<div style='width:calc(100% - 100px)'><p>Bla bla</p></div>

https://jsfiddle.net/qbu0u1s6/5/

【讨论】：

你是对的 width:100% 在这种情况下有效，抱歉简化了太多！当 div 内还有 width:100% 的其他元素时，它不起作用，因为它们变得太宽。我在 jsfiddle 中添加了一个这样的案例。
另外，我想要 "position:absolute;left:256px" 因为左边的空间用于其他绝对定位的元素。
你能添加一张你想要的图片吗？ width:100% 适合整个宽度。
这是我的问题中链接的 jsfiddle 的 Chrome 屏幕截图：i.stack.imgur.com/OfUwf.png，第三个 div（包含 width:100% 元素）太宽，请注意滚动条。我用你刚刚链接的小提琴得到了同样的结果。
编辑了答案