独自の単純な適応幅と高さを作成する_html/css_WEB-ITnose-htmlチュートリアル-php.cn

独自の単純な適応幅と高さを作成する_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:17:41

オリジナル

1022 人が閲覧しました

アダプティブとは、実際には幅と高さがそれに応じて変化することを意味します。

しかし、(親がピクセルで固定されている) 兄弟タグがピクセルである場合、div を 100% に設定すると確実に範囲を超えます (それ以上の値があります)。兄弟タグ) px length),

Box-sizing スキーム

Outer box-sizing: border-box; また、padding: 100px 0 0; も設定します
内側の高さ 100 ピクセルの要素は 100 ピクセル上に移動するか、絶対位置を使用しますスペースを占有しないようにするため、

別の要素の直接の高さ: 100%、

絶対位置、

 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>

ログイン後にコピー

初心者の方は笑ってください