外部div自适应内部标签的高度，设置最小高度、最大高度_html/css

首頁

web前端

html教學

外部div自适应内部标签的高度，设置最小高度、最大高度_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:39 AM

一、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>

登入後複製

二、给div设置最小、最大高度：

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

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn