Question

所以，我正在尝试使用以下内容制作聊天框：

         <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。请考虑到这是更大页面的一部分，因此我遗漏了一些部分。

Answer 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，所以你需要溢出那个类伙伴!! ：）

Answer 2

可能这就是你要找的东西

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

jsfiddle

绝对Div与P内容相对Div不溢出

2 个答案: