0

我刚刚用几个 div-s 和一点 CSS 和 javascript 写了一个页面。我不知道如何将滚动条插入我的 div 之一。代码并不难理解。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

问题的主要原因是您错过了设置#contentdiv 的宽度和高度。

所以添加它

width: 100%;
height: 100%;

同样对于父元素discussion，不要使用 % value 坚持静态值，height以便用户可以查看它。目前查看卷轴非常小。

width: 100%;
height: 200px;

JSFiddle

希望你能理解。

于 2013-11-04T07:06:20.927 回答
0

您需要从中删除溢出#discussion并将位置更改为相对#content

CSS

#discussion {
    width: 99%;
    height: 90%;

    border: 1px solid #ccc;
    padding: 5px;
    text-align: left;
    /*position: absolute; bottom: 0; left: 0;*/
    position: relative;
}
#content
{
    overflow: auto;
    position: relative;
    height:100px;
    width:100%;
}

更新的小提琴

于 2013-11-04T07:06:28.640 回答
0

您将高度设置为 90%，但它不知道 90% 是什么。如果您希望将其设置为身体的 90%，则需要设置html,body {height: 100%;}.

然后你需要去掉你放在内容上的绝对定位。

在这里工作小提琴：http: //jsfiddle.net/davidpauljunior/2PpqN/

于 2013-11-04T07:00:21.980 回答