Heim >Web-Frontend >HTML-Tutorial >自己做简单自适应宽高_html/css_WEB-ITnose
自己做简单自适应宽高_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:17:411057Durchsuche
自适应其实就是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>
初学者，见笑
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Print Css控制打印效果_html/css_WEB-ITnoseNächster Artikel：html中div标签的使用方法_html/css_WEB-ITnose