P 内容在相对 Div 内的绝对 Div 不溢出答案

【问题标题】：Absolute Div with P content inside relative Div not overflowingP 内容在相对 Div 内的绝对 Div 不溢出
【发布时间】：2013-11-22 00:25:28
【问题描述】：

所以，我正在尝试制作一个聊天框，内容如下：

         <div class="text-container">
                <div class="text" id="textholder">
                    <p>message</p>
                    ...
                    <p>message</p>
                </div>
            </div>

            <div class="chatbox-container">
                <div class="chatbox">
                  <input type="text" id="textinput" class="inputText" placeholder="Enter text" />
                  <input type="submit" class="send" onclick="addMessage()" value="Send" autofocus />
                </div>
            </div>

使用以下css：

.text-container{
    width: 100%;
    height: 500px;
    overflow: auto;
    position: relative;
}

.text{
    position: absolute;
    bottom: 0px;
    left: 25%;
    width: 50%;
    height: auto;

}

.chatbox-container{
    width: 100%;
    height: 30px;
    overflow: auto;
}

我使用 addMessage() 函数向其中添加更多 p（只需将带有文本的段落添加到 #textholder 的 innnerHTML）

现在的问题是我无法让文本 div 溢出（自动），这意味着文本消失了。我希望文本位于文本容器的中心，但我希望滚动位于容器上，所以它看起来像在 skype 中。

我该怎么做？此外，我尝试以类似Skype的方式将消息基本对齐到文本框的底部，但我读过这也可以通过垂直对齐来完成。但这并没有达到我想要的效果。

希望你能明白我的要求，英语不是我的母语，我不确定我问的方式是否正确。

提前致谢！

ps。请注意这是更大页面的一部分，因此我省略了一些部分。

【问题讨论】：

标签： css html overflow absolute

【解决方案1】：

将您的 text 课程修改为：

.text{
    position: absolute;
    bottom: 0px;
    height: 500px; //fix the height
    width :90%;
    overflow: auto; //scroll the content

}

小提琴：http://jsfiddle.net/logintomyk/pETfX/

你让container溢出，而消息在text，所以你需要溢出那个同学！！ :)

【讨论】：

好吧，你知道这就是问题所在，我将文本 div 对齐在中心，然后希望滚动在一边（再次，就像在 skype 中一样）。我确实忘记提了。
滚动条将出现在您 text 类 div 结束的任何地方......给它 100% 宽度（它的 90% 目前在小提琴中）将它推到完整的一边...... .

【解决方案2】：

这可能就是你要找的东西

.text-container {
    height:200px;
    overflow: auto;
    border:1px solid #ccc;
}
.chatbox-container {
    height: 30px;
}

jsfiddle

【讨论】：