Question

我正在使用jQuery创建一个聊天页面，底部有发送按钮，消息向上。我希望包含消息的div在到达页面顶部时溢出，但它会继续扩展。

这是HTML / jQuery：

<div style= "margin-top:0px;" data-role="page" id="politics">
        <div data-role="header">
            <a href="#home" data-icon="home">Home</a><h1>Chat about politics!</h1>
        </div>
        <div class="placeBottom" data-role="content">
            <div id="outputPolitics" style="margin-top:10px"></div>
            <input class="input-block-level" type="text" placeholder="Enter chat here" id="inputPolitics">
            <button id="buttonSendPolitics" class="btn">Send</button>
        </div>
    </div>

CSS：

    #outputPolitics
{
    font-family: "Times new roman", Times, serif;
    background-color: #ebe8bd;
    height: 100%
    overflow:scroll;
}

.thread
{
    position: relative;
}

.placeBottom
{
    position: absolute;
    bottom: 0px;
    width: 90%;

}

我猜这与我在div上的位置选择有关。我在互联网上发现了这个“placeBottom”的伎俩，这就是hickup？

Answer 1

您的问题很简单，div没有身高，所以没有限制。

如果您想在div上设置固定高度，请将其设置为height : 100%;

否则，如果您希望div对文字进行操作，当它达到某个点时，滚动条就会起作用，只需在max-height: 100%;和div上设置height:auto即可这是默认值。

请注意，您可以根据需要更改这些值。它可以是px，em或您想要的任何内容！

扩展div时不会触发溢出（jQuery页面）

1 个答案: