Javascript 如何将滚动条附加到div部分？_Javascript_Jquery_Html_Css

Javascript 如何将滚动条附加到div部分？

javascript jquery html css

Javascript 如何将滚动条附加到div部分？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我刚刚用几个div-s和一些CSS和javascript编写了一个页面。我不知道如何将滚动条插入我的一个div。代码并不难理解。CSS和javascript包含在代码中 <html> <head> <style> #container { vertical-align: top; width: 98%; height: 90%; padding: 5px; } #discussion { width: 99%;

我刚刚用几个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>

您将高度设置为90%，但它不知道90%是什么。如果希望将其设置为正文的90%，则需要设置

html，body{height:100%；}

然后你需要移除你放在内容上的绝对位置

这里的工作小提琴：

问题的主要原因是您没有设置#content
div的宽度和高度

所以加上它

width: 100%;
height: 100%;

同样对于父元素讨论
，不要使用%value，而是将

高度的静态值粘贴到上，以便用户可以查看它。目前，它是非常小的滚动查看
width: 100%;
height: 200px;

希望您理解。
您需要删除#讨论中的溢出内容
，并将#内容中的位置更改为相对位置

CSS
已更新
设置分区高度，然后添加溢出：自动，它将工作溢出：滚动
，或者如果只需要垂直滚动条，请使用溢出-y:scroll
在哪个分区中滚动？内容或讨论，只要我能滚动并看到前面插入的文本，任何一个都可以。@Mohsen代码修复程序显示滚动条，但滚动条不工作。在您的工作小提琴中，文本是从上到下插入的。我需要从下往上插入。我不知道你说的从下往上插入是什么意思？你能进一步澄清吗？在问题中添加了一张图片：p我没有在#content div中包含高度的原因是在div的底部显示先前插入的文本，而下一个文本将先前的内容推到顶部。。。对不起，我的英语不好，我希望它有意义。@NarankhuuBoldbaatar问题是你没有将文本放入讨论
div，你使用的是内容，这可能是实际问题的原因。
width: 100%;
height: 200px;

#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%;
}