【CSS3】上左右下框架自适应支持手机

admin

DIV：

1. <div class="header">$top[        DISCUZ_CODE_2        ]lt;/div>
   
2. <div class="flex">
   
3.         <div class="sider">$sider[        DISCUZ_CODE_2        ]lt;/div>
   
4.         <div class="frame">$body[        DISCUZ_CODE_2        ]lt;/div>
   
5. </div>
   
6. <div class="footer">$bottom[        DISCUZ_CODE_2        ]lt;/div>

复制代码

CSS:

1. $fst: #cc0000 !default;
   
2. $sec: #ffff00 !default;
   
3. $thd: #82e0e8 !default;
   
4. $fth: #031618 !default;
   
5. $gray-600: #6c757d !default;
   
6. $gray-800: #343a40 !default;
   
7. 
   
8. body, html {
   
9.         margin: 0;
   
10.         padding: 0;
    
11.         height: 100%;
    
12.         display: flex;
    
13.         flex-direction: column;
    
14. }
    
15. 
    
16. .header {
    
17.         background: $fth;
    
18.         display: flex;
    
19.         align-items: center;
    
20.         width: 100%;
    
21.         height: 50px;
    
22.         justify-content: space-between;
    
23.         * {
    
24.                 color: #fff;
    
25.         }
    
26. 
    
27.         .user {
    
28.                 background: $fst;
    
29.                 color: #fff;
    
30.                 padding: 0 10px;
    
31.                 border-radius: 10px;
    
32.                 margin-right: 10px;
    
33.                 border: 2px solid #800;
    
34.         }
    
35. }
    
36. 
    
37. .footer {
    
38.         display: flex;
    
39.         flex-direction: column;
    
40.         width: 100%;
    
41.         min-height: 30px;
    
42.         justify-content: center;
    
43.         align-items: center;
    
44.         background: $gray-600;
    
45.         padding-top: 5px;
    
46.         padding-bottom: 5px;
    
47. 
    
48.         * {
    
49.                 color: #ccc;
    
50.                 font-size: 12px;
    
51.         }
    
52. 
    
53.         label {
    
54.                 margin: 0;
    
55.         }
    
56. }
    
57. 
    
58. .flex {
    
59.         display: flex;
    
60.         flex-direction: row;
    
61.         flex: 1;
    
62.         position: relative;
    
63. }
    
64. 
    
65. .sider {
    
66.         position: absolute;
    
67.         top: 0;
    
68.         height: 100%;
    
69.         z-index: 10;
    
70.         background: rgba($color:$gray-600,$alpha:.9);
    
71.         border-left: 10px solid rgba($color:$gray-600,$alpha:.9);
    
72. 
    
73.         &:hover {
    
74.                 border-left: 0;
    
75.                 width: 220px;
    
76. 
    
77.                 ul {
    
78.                         display: block;
    
79.                 }
    
80.         }
    
81. 
    
82.         ul {
    
83.                 display: none;
    
84. 
    
85.                 li {
    
86.                         background: rgba($color:$gray-800,$alpha:.9);
    
87. 
    
88.                         a {
    
89.                                 display: flex;
    
90.                                 padding: 8px 8px 8px 30px;
    
91.                                 color: #ccc;
    
92. 
    
93.                                 &:hover {
    
94.                                         color: #fff;
    
95.                                 }
    
96.                         }
    
97. 
    
98.                         ul {
    
99. 
    
100.                                 li {
     
101.                                         background: rgba($color:$gray-600,$alpha:.9);
     
102. 
     
103.                                         a {
     
104.                                                 padding: 5px 8px 5px 30px;
     
105.                                                 font-size: 12px;
     
106.                                         }
     
107.                                 }
     
108.                         }
     
109.                 }
     
110.         }
     
111. }
     
112. 
     
113. .frame {
     
114.         display: flex;
     
115.         flex: 1;
     
116.         padding: 20px;
     
117. 
     
118.         iframe {
     
119.                 width: 100%;
     
120.         }
     
121. }
     
122. 
     
123. @media(min-width:576px) {
     
124.         .sider {
     
125.                 position: relative;
     
126.                 border-left: 0;
     
127.                 flex: 0 1 220px;
     
128. 
     
129.                 ul {
     
130.                         display: block;
     
131.                 }
     
132.         }
     
133. 
     
134.         .footer {
     
135.                 flex-direction: row;
     
136.                 justify-content: flex-end;
     
137.         }
     
138. }
     
139. 
     

复制代码

Hondy.Site.User.Login.css页面参考