JSDM

HTML

 
1
<html>
2
<head>
3
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
4
    <style>
5
    body{
6
        margin:0;
7
    }
8
        .warper{
9
            height:100%;
10
            display: flex;
11
            flex-direction:column;
12
            align-content:stretch;
13
        }
14
        .header{
15
            height:5rem;
16
            background-color: red;
17
            order: 0;
18
            flex-shrink: 0;
19
        }
20
        .footer{
21
            height:3rem;
22
            background-color: blue;
23
            order: 2;
24
            flex-shrink: 0;
25
        }
26
        .container{
27
            flex-grow:999;
28
            order: 1;
29
            overflow:auto;
30
            position: relative;
31
        }
32
        .container .baseline{
33
            min-height:100%;
34
            height:100%;
35
            overflow:auto;
36
        }
37
    </style>
38
</head>
39
<body>
40
    <div class="warper">
41
        <div class="header">header</div>
42
        <section class="container">
43
            <div class="baseline">
44
                <p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p><p>container</p>
45
            </div>
46
        </section>
47
        <div class="footer">footer</div>
48
    </div>
49
</body>
50
</html>

CSS

​x
 
1
html,body {
2
    height:100%;
3
   overflow:qhidden;
4
}
5
*{margin:0;padding:0}
6
li,input,button{height:35px;}
7
​
8
#content{
9
height:100%;
10
margin-top:100px;
11
margin-left:100px;
12
width:60%;
13
}
14
#box{
15
​
16
​
17
 height:100%;
18
 bottom:35px;
19
text-align:center;
20
​
21
border:1px solid red;
22
 overflow:scroll;
23
}
24
li{
25
border:1px solid red;
26
margin-top:10px;
27
}
28
#header {
29
   width:200px;
30
    height:100px;
31
position:fixed;
32
top:0;
33
​
34
    background:#FeE4B5;
35
}
36
#footer{
37
    clear:left;    /* 防止float:left对footer的影响 */
38
    width:380px;
39
    height:80px;
40
position:fixed;
41
bottom:0;
42
right:0;
43
    background:#FFE4B5;
44
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
20
 
1
​
2
function $(id) {
3
  return document.getElementById?document.getElementById(id):document.all?d.all[id]:document.layers[id];
4
}
5
function send(){
6
​
7
  $("box").innerHTML+="<h1>"+$("msg").value+"</h1>";
8
​
9
$("box").scrollTop+=1000;
10
​
11
}
12
window.onload=function(){
13
$("box").onscroll=function(){
14
console.log(this);
15
console.log(this.scrollTop);
16
​
17
}
18
​
19
}
20
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................