Skip to content

Commit e90828a

Browse files
ipengyoipengyo
committed
全屏布局
1 parent c4e0be1 commit e90828a

File tree

3 files changed

+275
-0
lines changed

3 files changed

+275
-0
lines changed

‎全屏布局/full-1.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>全屏布局</title>
6+
<style type="text/css">
7+
html,body,.layout-fullScreen{
8+
margin:0px;
9+
overflow:hidden;
10+
height:100%;
11+
}
12+
.layout-top{
13+
position: absolute;
14+
top:0px;
15+
left:0px;
16+
right:0px;
17+
width:0px;
18+
width:100%;
19+
height:100px;
20+
background:#FC7F7F;
21+
}
22+
.layout-bottom{
23+
position:absolute;
24+
bottom:0px;
25+
right:0px;
26+
left:0px;
27+
width:100%;
28+
height:50px;
29+
background-color:#A7A1A1;
30+
}
31+
.layout-left{
32+
position:absolute;
33+
left:0px;
34+
top:100px;
35+
bottom:50px;
36+
width:150px;
37+
background-color:#DE86FF;
38+
}
39+
.layout-right{
40+
overflow:auto;
41+
position:absolute;
42+
top:100px;
43+
left:150px;
44+
right:0px;
45+
bottom:50px;
46+
background-color:#905D5D;
47+
}
48+
.layout-right .layout-right-wrap{
49+
width:100%;
50+
min-height:1000px;
51+
}
52+
53+
54+
55+
/*NOTE:例如管理系统，监控与统计平台均广泛的使用全屏布局。*/
56+
57+
</style>
58+
</head>
59+
<body>
60+
<div class="layout-fullScreen">
61+
<div class="layout-top">
62+
TOP
63+
</div>
64+
<div class="layout-center">
65+
<div class="layout-left">LEFT</div>
66+
<div class="layout-right">
67+
<div class="layout-right-wrap">
68+
<p>asdfasdfasdfsad</p>
69+
<p>asdfasdfasdfsad</p>
70+
<p>asdfasdfasdfsad</p>
71+
<p>asdfasdfasdfsad</p>
72+
<p>asdfasdfasdfsad</p>
73+
<p>asdfasdfasdfsad</p>
74+
<p>asdfasdfasdfsad</p>
75+
<p>asdfasdfasdfsad</p>
76+
<p>asdfasdfasdfsad</p>
77+
<p>asdfasdfasdfsad</p>
78+
<p>asdfasdfasdfsad</p>
79+
<p>asdfasdfasdfsad</p>
80+
<p>asdfasdfasdfsad</p>
81+
<p>asdfasdfasdfsad</p>
82+
<p>asdfasdfasdfsad</p>
83+
<p>asdfasdfasdfsad</p>
84+
<p>asdfasdfasdfsad</p>
85+
<p>asdfasdfasdfsad</p>
86+
<p>asdfasdfasdfsad</p>
87+
</div>
88+
</div>
89+
</div>
90+
<div class="layout-bottom">BOTTOM</div>
91+
92+
</div>
93+
94+
95+
</body>
96+
</html>

‎全屏布局/full-2.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>全屏布局</title>
6+
<style type="text/css">
7+
html,body,.layout-fullScreen{
8+
margin:0px;
9+
overflow:hidden;
10+
height:100%;
11+
}
12+
.layout-fullScreen{
13+
display:flex;
14+
flex-direction:column;
15+
}
16+
.layout-top{
17+
18+
height:100px;
19+
background:#FC7F7F;
20+
}
21+
.layout-bottom{
22+
23+
height:50px;
24+
background-color:#A7A1A1;
25+
}
26+
.layout-center{
27+
flex:1;
28+
display:flex;
29+
}
30+
.layout-left{
31+
32+
width:150px;
33+
background-color:#DE86FF;
34+
}
35+
.layout-right{
36+
flex:1;
37+
overflow:auto;
38+
background-color:#905D5D;
39+
}
40+
.layout-right .layout-right-wrap{
41+
min-height:1000px;
42+
}
43+
44+
45+
46+
/*NOTE:例如管理系统，监控与统计平台均广泛的使用全屏布局。
47+
Flex 兼容性
48+
49+
CSS3 中的新概念所有 IE9 及其也行版本都不兼容。*/
50+
51+
</style>
52+
</head>
53+
<body>
54+
<div class="layout-fullScreen">
55+
<div class="layout-top">
56+
TOP
57+
</div>
58+
<div class="layout-center">
59+
<div class="layout-left">LEFT</div>
60+
<div class="layout-right">
61+
<div class="layout-right-wrap">
62+
<p>asdfasdfasdfsad</p>
63+
<p>asdfasdfasdfsad</p>
64+
<p>asdfasdfasdfsad</p>
65+
<p>asdfasdfasdfsad</p>
66+
<p>asdfasdfasdfsad</p>
67+
<p>asdfasdfasdfsad</p>
68+
<p>asdfasdfasdfsad</p>
69+
<p>asdfasdfasdfsad</p>
70+
<p>asdfasdfasdfsad</p>
71+
<p>asdfasdfasdfsad</p>
72+
<p>asdfasdfasdfsad</p>
73+
<p>asdfasdfasdfsad</p>
74+
<p>asdfasdfasdfsad</p>
75+
<p>asdfasdfasdfsad</p>
76+
<p>asdfasdfasdfsad</p>
77+
<p>asdfasdfasdfsad</p>
78+
<p>asdfasdfasdfsad</p>
79+
<p>asdfasdfasdfsad</p>
80+
<p>asdfasdfasdfsad</p>
81+
</div>
82+
</div>
83+
</div>
84+
<div class="layout-bottom">BOTTOM</div>
85+
86+
</div>
87+
88+
89+
</body>
90+
</html>

‎全屏布局/full-3.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>全屏布局</title>
6+
<style type="text/css">
7+
html,body,.layout-fullScreen{
8+
margin:0px;
9+
overflow:hidden;
10+
height:100%;
11+
}
12+
.layout-fullScreen{
13+
display:flex;
14+
flex-direction:column;
15+
}
16+
.layout-top{
17+
18+
background:#FC7F7F;
19+
}
20+
.layout-bottom{
21+
22+
background-color:#A7A1A1;
23+
}
24+
.layout-center{
25+
flex:1;
26+
display:flex;
27+
}
28+
.layout-left{
29+
30+
background-color:#DE86FF;
31+
}
32+
.layout-right{
33+
flex:1;
34+
overflow:auto;
35+
background-color:#905D5D;
36+
}
37+
.layout-right .layout-right-wrap{
38+
min-height:1000px;
39+
}
40+
41+
42+
43+
/*NOTE:例如管理系统，监控与统计平台均广泛的使用全屏布局。
44+
Flex 兼容性
45+
46+
CSS3 中的新概念所有 IE9 及其也行版本都不兼容。
47+
根据内容
48+
*/
49+
50+
</style>
51+
</head>
52+
<body>
53+
<div class="layout-fullScreen">
54+
<div class="layout-top">
55+
TOP
56+
</div>
57+
<div class="layout-center">
58+
<div class="layout-left">LEFT</div>
59+
<div class="layout-right">
60+
<div class="layout-right-wrap">
61+
<p>asdfasdfasdfsad</p>
62+
<p>asdfasdfasdfsad</p>
63+
<p>asdfasdfasdfsad</p>
64+
<p>asdfasdfasdfsad</p>
65+
<p>asdfasdfasdfsad</p>
66+
<p>asdfasdfasdfsad</p>
67+
<p>asdfasdfasdfsad</p>
68+
<p>asdfasdfasdfsad</p>
69+
<p>asdfasdfasdfsad</p>
70+
<p>asdfasdfasdfsad</p>
71+
<p>asdfasdfasdfsad</p>
72+
<p>asdfasdfasdfsad</p>
73+
<p>asdfasdfasdfsad</p>
74+
<p>asdfasdfasdfsad</p>
75+
<p>asdfasdfasdfsad</p>
76+
<p>asdfasdfasdfsad</p>
77+
<p>asdfasdfasdfsad</p>
78+
<p>asdfasdfasdfsad</p>
79+
<p>asdfasdfasdfsad</p>
80+
</div>
81+
</div>
82+
</div>
83+
<div class="layout-bottom">BOTTOM</div>
84+
85+
</div>
86+
87+
88+
</body>
89+
</html>

0 commit comments

Comments
 (0)