外部div自适应内部标签的高度,设置最小高度、最大高度

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

1.用伪对象清除float属性

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS -->
<style type="text/css">
#wrap2{
width: auto;
height: auto;
min-height: 250px;/*设置最小高度*/
max-height: 500px;/*设置最大高度*/
overflow: hidden;/*内容超出后隐藏*/
border: 2px solid yellow;
}
#wrap2:after{
content: "";
visibility: hidden;
display: block;
clear: both;
}
#inner2{
width: 200px;
height: 200px;
border: 1px solid black;
float: right;
}
</style>
</head>
<body>
<div id="wrap2" class="">
<div id="inner2" class=""></div>
</div>
</body>
</html>

2.用空div来清除float属性

 <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- CSS -->
<style type="text/css">
#wrap1{
width: auto;
height: auto;
border: 2px solid yellow;
}
#inner1{
width: 200px;
height: 200px;
border: 1px solid black;
float: right;
}
</style>
</head>
<body>
<div id="wrap1">
<div id="inner1"></div>
<div style="clear:both;"></div> <!-- 在外层div的底部加一个空的div标签,并设置样式为clear:both; -->
</div>
</body>
</html>

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

 #wrap1{
width: auto;
min-height: 100px;
max-height: 500px;
overflow: hidden;
border: 2px solid yellow;
}
上一篇:PHP学习之-正则表达式


下一篇:spring中Bean对象的生命周期