自己做简单自适应宽高 - gpfq
程序员文章站
2022-05-25 10:15:54
...
自适应其实就是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>
初学者,见笑
- 外层
上一篇: 雪碧图应用
下一篇: PHP7内核剖析10之线程安全