你的位置:首页 > 网页设计

[网页设计]外部div自适应内部标签的高度,设置最小高度、最大高度


一、div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>、<ul>、<ol>或者文字等各种内容。造成外层的div不能自动适应内容高度的原因往往是因为内部标签设置了float属性,下面来看一下解决办法。

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   }