Rumah >hujung hadapan web >html tutorial >自己做简单自适应宽高_html/css_WEB-ITnose
自己做简单自适应宽高_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:17:411059semak imbas
自适应其实就是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>
初学者，见笑
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Print Css控制打印效果_html/css_WEB-ITnoseArtikel seterusnya：html中div标签的使用方法_html/css_WEB-ITnose