方案一：padding,margin为负值
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应等高效果(padding,margin为负值)</title>
<style>
* {
margin: 0;
padding: 0;
}
.left, .right {
float: left;
width: 400px;
border: 5px solid green;
padding-bottom: 9999px;
margin-bottom: -9999px;
text-align: center;
background: red;
}
.down {
background: red;
margin-top: 10px;
width: 820px;
}
</style>
</head>
<body>
<div style="overflow: auto">
<div class="left">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</div>
<div class="right">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</div>
</div>
<div class="down">
<p>下面内容</p>
<p>下面内容</p>
</div>
</body>
</html>
```
方案二：table标签
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应等高效果(table标签)</title>
<style>
* {
margin: 0;
padding: 0;
}
.left, .right {
width: 400px;
border: 5px solid green;
text-align: center;
background: red;
vertical-align: top;
}
.down {
background: red;
margin-top: 10px;
width: 820px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="left">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</td>
<td class="right">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</td>
</tr>
</table>
<div class="down">
<p>下面内容</p>
<p>下面内容</p>
</div>
</body>
</html>
```
方案三：flex
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应等高效果(flex)</title>
<style>
* {
margin: 0;
padding: 0;
}
.left, .right {
width: 400px;
border: 5px solid green;
text-align: center;
background: red;
}
.down {
background: red;
margin-top: 10px;
width: 820px;
}
</style>
</head>
<body>
<div style="display: flex">
<div class="left">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</div>
<div class="right">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</div>
</div>
<div class="down">
<p>下面内容</p>
<p>下面内容</p>
</div>
</body>
</html>
```
方案四：高div的高度赋值给低div的高度
```html:run
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自适应等高效果(高div的高度赋值给低div的高度)</title>
<style>
* {
margin: 0;
padding: 0;
}
.left, .right {
width: 400px;
border: 5px solid green;
text-align: center;
background: red;
float:left;
}
.down {
background: red;
margin-top: 10px;
width: 820px;
}
</style>
</head>
<body>
<div style="overflow: auto">
<div class="left" id="left">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</div>
<div class="right" id="right">
<p>自适应等高效果</p>
<p>自适应等高效果</p>
</div>
</div>
<div class="down">
<p>下面内容</p>
<p>下面内容</p>
</div>
</body>
</html>
<script type="text/javascript">
var left=document.getElementById("left");
var right=document.getElementById("right");
var leftClientHeight=left.clientHeight;
var rightClientHeight=right.clientHeight;
var distanceClientHeight=leftClientHeight-rightClientHeight;
if(rightClientHeight<leftClientHeight){
right.style.height=leftClientHeight+"px";
}
if(leftClientHeight<rightClientHeight){
left.style.height=rightClientHeight+"px";
}
</script>
```
附：jQuery实现多div等高(与方案四相似)
```javascript
$(function() {
var maxHeight = 0;
//以下求最高的div的高度
$(".height").each(function() {
var thisHeight = $(this).innerHeight();
maxHeight = thisHeight > maxHeight ? thisHeight : maxHeight;
})
//以下将最高的div的高度赋值给每一个(需要与最高div等高的)div，
$(".height").each(function() {
var thisPadding = $(this).innerHeight() - $(this).height();
//在jQuery中，innerheight=padding+内容height
$(this).height(maxHeight - thisPadding);
})
})
```
41完全自适应等高效果
猜你喜欢
转载自blog.csdn.net/bao13716164418/article/details/91048544
今日推荐
周排行