外部 div は内部タグの高さに適応し、最小高さと最大高さを設定します_html/css

外部 div は内部タグの高さに適応し、最小高さと最大高さを設定します_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:39:54

オリジナル

1730 人が閲覧しました

1. div 適応型高さ: フロントエンド開発では、内部タグとコンテンツの高さに外部 div を自動的に適応させることが必要になることがよくあります。内部タグは

、

1. 疑似オブジェクトを使用して float 属性をクリアします

 1 <!doctype html> 2 <html lang="en"> 3  <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6   <!-- CSS --> 7   <style type="text/css"> 8     #wrap2{     9         width: auto;10         height: auto;11         min-height: 250px;/*设置最小高度*/12         max-height: 500px;/*设置最大高度*/13         overflow: hidden;/*内容超出后隐藏*/14         border: 2px solid yellow;15     }16     #wrap2:after{    17         content: "";18         visibility: hidden;19         display: block;20         clear: both;21     }22     #inner2{    23         width: 200px;24         height: 200px;25         border: 1px solid black;26         float: right;27     }28   </style>29  </head>30  <body>31   <div id="wrap2" class="">32     <div id="inner2" class=""></div>33   </div>34  </body>35 </html>36

ログイン後にコピー

2. 空の div を使用して float 属性をクリアします

 1 <!doctype html> 2 <html lang="en"> 3  <head> 4   <meta charset="UTF-8"> 5   <title>Document</title> 6   <!-- CSS --> 7   <style type="text/css"> 8     #wrap1{     9         width: auto;10         height: auto;11         border: 2px solid yellow;12     }13     #inner1{    14         width: 200px;15         height: 200px;16         border: 1px solid black;17         float: right;18     }19   </style>20  </head>21  <body>22   <div id="wrap1">23     <div id="inner1"></div>24     <div style="clear:both;"></div> <!-- 在外层div的底部加一个空的div标签，并设置样式为clear:both; -->25   </div>26  </body>27 </html>

ログイン後にコピー

2. 最小値と最大値を設定しますdiv の高さ:

1 #wrap1{    2         width: auto;3         min-height: 100px;4         max-height: 500px;5         overflow: hidden;6         border: 2px solid yellow;7     }

ログイン後にコピー