自己做简单自适应宽高

自适应其实就是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的div</div>40 <div class="sister">左边宽度PX的div(高度不要定义)</div>41 <div class="my">重点div!</div>42 </body>43 </html>

View Code


初学者，见笑

原标题：自己做简单自适应宽高

关键词：

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们： admin#shaoqun.com （#换成@）。

寄物流马来西亚：https://www.goluckyvip.com/tag/90543.html
寄往马来西亚的快递：https://www.goluckyvip.com/tag/90544.html
寄快递去马来西亚：https://www.goluckyvip.com/tag/90545.html
快递寄往马来西亚：https://www.goluckyvip.com/tag/90546.html
寄往马来西亚快递：https://www.goluckyvip.com/tag/90547.html
物流快递马来西亚：https://www.goluckyvip.com/tag/90548.html
青岛崂山旅游攻略自驾游（详细介绍崂山自驾游路线和景点）：https://www.vstour.cn/a/404242.html
海南旅游景点的路线海南旅游景点大全攻略自驾游：https://www.vstour.cn/a/404243.html