ホームページ > 記事 > ウェブフロントエンド > 独自の単純な適応幅と高さを作成する_html/css_WEB-ITnose
独自の単純な適応幅と高さを作成する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:17:411023ブラウズ
アダプティブとは、実際には幅と高さがそれに応じて変化することを意味します。
しかし、(親がピクセルで固定されている) 兄弟タグがピクセルである場合、div を 100% に設定すると確実に範囲を超えます (それ以上の値があります)。兄弟タグ) px length),
Box-sizing スキーム
- Outer box-sizing: border-box; また、padding: 100px 0 0; も設定します
- 内側の高さ 100 ピクセルの要素は 100 ピクセル上に移動するか、絶対位置を使用しますスペースを占有しないようにするため、
- 別の要素の直接の高さ: 100%、
絶対位置、
- 100% の適応要素の直接位置: 上: 0、左: 0ボディを親として使用して、さまざまな解像度効果を試します。私が使用した方法 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>
初心者の方は笑ってください
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。