当前位置：Gxlcms > html代码 > 自己做简单自适应宽高-gpfq

自己做简单自适应宽高-gpfq

时间：2021-07-01 10:21:17 帮助过：9人阅读

自适应其实就是width，height都随着变化，

但是如果(父级是px固定)兄弟标签是以px为单位，那么再设置div100%就肯定超出范围了(多了兄弟标签px长度),

　　box-sizing方案

外层box-sizing: border-box; 同时设置padding: 100px 0 0；
内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；

另一个元素直接height: 100%;

absolute positioning

外层position: relative；

百分百自适应元素直接

position: absolute; top: 100px; bottom: 0; left: 0

我们以body为父级试试不同分辨率效果,我用的方法2,相对来说简单点

 1 DOCTYPE html  >
 2 <html  >
 3 <head>
 4     <title>   title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6     <style type="text/css">
 7         body,html{
 8             padding:0;
 9             margin:0;
10             width:100%;
11             height:100%;
12             font-size:20px;
13             text-align:center;
14         }
15          .brother{
16              background-color:#f00;
17              width:100%;
18              height:70px;
19              position:absolute;
20          }
21         .sister{
22             background-color:#0f0;
23             width:140px;
24             position:absolute;
25             top:70px;
26             bottom:0;
27         }
28         .my{
29             position:absolute;
30             top:70px;/*top与上边对应-*/
31             left:140px;/*left与左边对应-*/
32             bottom:0;
33             right:0;
34             background-color:#00f;
35         }
36     style>
37 head>
38 <body>
39 <div class="brother">上边高度为PX的divdiv>
40 <div class="sister">左边宽度PX的div(高度不要定义)div>
41 <div class="my">重点div!div>
42 body>
43 html>

View Code


初学者，见笑

自己做简单自适应宽高-gpfq

box-sizing方案

absolute positioning

人气教程排行

　　box-sizing方案