我刚刚用几个 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.
最佳答案
您将高度设置为 90%，但它不知道 90% 是什么。
如果你想将它设置为 body 的 90%，你需要设置 html,body {height: 100%;}。
然后您需要删除您放置在内容上的绝对定位。
关于javascript - 如何将滚动条附加到 div 部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19762756/