Html 插入更多文本时，增加div高度并动态向下移动其他div

当文本增加时，我很难用文本向下移动主div下的其他div。我用css尝试了很多次。当文本随着按enter键的次数增加时，文本div height将增加，但其他跳水动作不会移动。我对我的英语感到抱歉。我能为此做些什么

这是在插入文本之前

这是在插入文本之后

这是我的密码

    <div style="width:795px; min-height:40px; background-color:#0099FF; position:absolute; left: 60px; top: 0px;padding-top:10px;padding-left:5px; color:#FFF;font-size:14px"></div>
<span style="width:795px; min-height:40px; background-color:#0099FF; position:absolute; left: 60px; top: 0px;padding-top:10px;padding-left:5px; color:#FFF;font-size:14px"><strong>Tomorrow can be too late..</strong></span>
<div style="width:100px; height:30px; background-color:#FBC81A; position:absolute; left: 757px; top: 40px; border-bottom-left-radius:5px;z-index:1;">
  <div style="width:50px;height:30px; position:absolute; padding-top:3px;padding-left:13px;">
    <input type="submit" name="btn_report" id="btn_report" value="" style="background-image:url(images/report.png);background-repeat:no-repeat;width:23px;height:23px;border:none;background-color:#FBC81A;cursor:pointer;" title="Report this post" />
  </div>
<div style="width:50px; height:30px; position:absolute; left: 50px; background-color:#0C0; top: 0px;text-align:center;">
<div style="margin-top:7px;color:#FFF;font-weight:bold;cursor:pointer;" title="Post reputations">102</div>

</div></div>
  <div style="width:795px; min-height:340px; background-color:#F3F8F8; position:absolute ; left: 59px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 40px;  border-left:3px #0099FF solid;border-right:3px #0099FF solid;" >
    <p>sds</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
    <p>sad</p>
    <p>s</p>
    <p>&nbsp;</p>
    <p>ds</p>
    <p>ad</p>
    <p>s</p>
    <p>&nbsp;</p>
    <p>d</p>
    <p>dsa</p>
    <p>das</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
    <p>as</p>
    <p>das</p>
    <p>d</p>
    <p>as</p>
    <p>das</p>
    <p>d</p>
    <p>sa</p>
    <p>d</p>
  </div>
  <div style="width:800px; min-height:25px; background-color:#0099FF; position:absolute; left: 60px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 355px;" ></div>
   <div style="width:798px; min-height:20px;  position:absolute; left: 62px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; top: 380px;background-image:url(shadow_9.png);background-repeat:no-repeat;"  ></div>
</div>

明天可能太晚了。
102
十二烷基硫酸钠

d

sa

d

悲哀的



ds

广告



d

数字减影

达斯

d

sa

d

作为

达斯

d

作为

达斯

d

sa

d

只需移动底部的条形图

：

在

中放置文本（在

标记下）并将其更改为：

<div style="width:800px; min-height:25px; background-color:#0099FF; position:relative; left: 0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; bottom: 0px;" ></div>

---

它会随着文本内容的移动而动态移动，这是因为

位置：绝对
，
左侧：60px
和
顶部：355px
。这样，容器将始终位于屏幕上的相同位置。U必须使用
位置：相对
，使用
边距
而不是
左
和
右
。此外，div嵌套不正确

看看

它认为它能按你想要的方式工作。
溢出：隐藏
标记的code>in@Andy那是行不通的，因为那只会阻止溢出。要使其增长，请在div中添加一个填充底部：1px和文本，这将导致其他元素随着文本div的增长而移动。这是因为您正在为条使用position:absolute。尝试使用display:block制作布局，而不是使用position:absolute。您需要执行以下操作。在单独的文件中使用css，这样编辑起来容易多了。2.对项目使用相对定位（使用浮动和块显示）。3.如果之后出现问题，请在JSFIDLE中共享。我需要将display:block放在哪里？是否需要删除position:absolute？为什么需要创建另一个div以在底部添加边框。只需为文本容器div添加
border-bottom:25px-solid 35; 0099FF
，然后删除额外的div即可解决问题。
<div style="width:800px; min-height:25px; background-color:#0099FF; position:relative; left: 0px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; bottom: 0px;" ></div>