0

下に送信ボタン、上にメッセージが表示される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」トリックを見つけましたが、これは問題ですか?

4

1 に答える 1

0

あなたの問題は単純で、div身長がないので、制限はありません。

固定の高さが必要な場合は、次のdivように設定しますheight : 100%;

それ以外の場合はdiv、テキストを拡張して、あるポイントに到達したときにスクロールバーが機能するようにするには、 amax-height: 100%;を設定するだけでdiv、height:autoこれがデフォルト値です。

必要に応じてこれらの値を変更できることに注意してください。それはpx、emまたはあなたが望むものなら何でもかまいません!

于 2013-05-08T20:14:17.573 に答える