0

いくつかの div と小さな CSS と JavaScript を含むページを作成しました。div の 1 つにスクロール バーを挿入する方法がわかりません。コードはそれほど難しくありません。コードには CSS と JavaScript が含まれています。

<html>
<head>
<style>
#container 
{
    vertical-align: top;
    width: 98%;
    height: 90%;
    padding: 5px;
}
#discussion {
    width: 99%;
    height: 90%;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
    /*position: absolute; bottom: 0; left: 0;*/
    position: relative;
}
#content
{
    overflow-y: auto;
    position: absolute; bottom: 0; left: 0;
}
#message {
    width: 100%;
    vertical-align:bottom;
    padding: 5px;
    border: 1px solid #ccc;
}
</style>
<script>
function init(){
    var message = $('#message');
    var content = $('#content');
    message.keypress(function (e) {
        if (e.keyCode == 13 && message.val().length > 0) {
            content.append(message.val() + "<br/>");
            //content.scrollTop(discussion.get(0).scrollHeight); //works fine with top to down
            message.val('').focus();
        }
    });
};
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body onload="javascript:init();">
     <div id="container">
        <div id="discussion">
            <div id="content"></div>
        </div>
        <input id="message" type="text" placeholder="Hit Enter button to insert"/> 
     </div>
</body>
</html>

コンテンツがディスカッション セクションから出たときにスクロール バーが必要です。問題は、上から下へのフロー スクロール バーでテキストを挿入すると正常に動作することです。 残念ながら、すべてのテキストは下から上に挿入する必要があります。

---------------
-
-
-
-
- first text
---------------


---------------
-
-
-
- first text
- second text
---------------


---------------
- second text
- third text
- fourth text
- fifth text
- sixth text
--------------- now I need a scroll bar to see first text.
4

3 に答える 3

0

高さを 90% に設定しましたが、それが 90% であることを認識していません。ボディの 90% に設定する場合は、 を設定する必要がありますhtml,body {height: 100%;}。

次に、コンテンツに配置した絶対位置を削除する必要があります。

ここで働くフィドル：http://jsfiddle.net/davidpauljunior/2PpqN/

于 2013-11-04T07:00:21.980 に答える