<div id="header"> this is header</div>
<div id="footer">
<input id='msg' type="" vavlue='1111'>
<button onclick='send()' >SEND</button>
</div>
<div id="content">
<div id='box'>
dfsfaf
</div>
</div>
xxxxxxxxxx
html,body {
height:100%;
overflow:qhidden;
}
*{margin:0;padding:0}
li,input,button{height:35px;}
#content{
height:80%;
margin-top:100px;
margin-left:100px;
width:60%;
}
#box{
height:100%;
bottom:35px;
text-align:center;
border:1px solid red;
overflow:scroll;
}
li{
border:1px solid red;
margin-top:10px;
}
#header {
width:200px;
height:100px;
position:fixed;
top:0;
background:#FeE4B5;
}
#footer{
clear:left; /* 防止float:left对footer的影响 */
width:380px;
height:80px;
position:fixed;
bottom:0;
right:0;
background:#FFE4B5;
}
xxxxxxxxxx
function $(id) {
return document.getElementById?document.getElementById(id):document.all?d.all[id]:document.layers[id];
}
function send(){
$("box").innerHTML+="<h1>"+$("msg").value+"</h1>";
$("box").scrollTop+=1000;
}
window.onload=function(){
$("box").onscroll=function(){
console.log(this);
console.log(this.scrollTop);
}
}