纯CSS实现等高margin-bottom:-3000px;padding-bottom:3000px;两栏等高pos

margin-bottom:-3000px; padding-bottom:3000px;两栏等高

<style>
body{background-color:#d0e4fe;}
#test{overflow:hidden;}
.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
.right{width:400px; margin-bottom:-3000px; padding-bottom:3000px; background:#f0f3f9; float:right;}
</style>
<div id="test">
    <div class="left">左边，无高度属性，自适应于最高一栏的高度自适应于最高一栏的高度自适应于最高一栏的高度自适应于最高一栏的高度自适应于最高一栏的高度</div>
    <div class="right">右边，无高度属性，自适应于最高一栏的高度</div>
</div>

position:absolute;填色

<style>
	.father{
		position: relative;/*兼容*/
		overflow:hidden;
		background: orange;
	}
	.left{
		width: 50%;
		float: left;
		position: relative;/* 必须 */
	}
	.leftContent{
		z-index: 1;
		position: relative;/* 必须 */
	}
	.absolute{
		position: absolute;
		width: 100%;
		height: 999rem;
		left: 0;
		top: 0;
		background: red;/*填色*/
	}
	.right {
		width: 50%;
		float:right;
	}
</style>
</head>

<body>
	<div class="father">
		<div class="left">
			<div class="absolute"></div>
			<div class="leftContent">
				是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段
			</div>
		</div>
		<div class="right">这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这这是一个段落这是一个段落</div>
	</div>

</body>
</html>

border边框的高度和div高度近似相等
使用背景图片，需求变动需要更改
display: table-row; display:table-cell设置成表格display