JSFiddle - React, Tailwind, and code Playground

by XianfaLang

HTML

<!-- 三列等高（负边距实现-自适应宽度）-->
<div class="header">头部信息</div>
<div class="container">
	<div class="mainBox">
		<div class="content">
			<p>主要内容区域</p>
			<p>多一点文字信息</p>
			<p>更能看得清楚到底是是不是等高</p>
			<p>吃饱了才会撑开</p>
			<p>差不多饱了</p>
			<p>不用太饱~</p>
		</div>
	</div>
	<div class="subMainBox">次要内容区域</div>
	<div class="sideBox">侧边栏</div>
</div>
<div class="footer">底部信息</div>

CSS

* {
	margin:0;
	padding:0;
}
.header, .footer {
	height:30px;
	line-height:30px;
	text-align:center;
	color:#FFFFFF;
	background-color:#AAAAAA;
}
.container {
	float:left;
	width:100%;
	text-align:center;
	overflow:hidden; /* 截区超过.container标签之外的多余部分 */
	color:#FFFFFF;
}
.mainBox {
	float:left;
	width:100%;
	margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
	padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */
} /* 设置主要内容区域的外层div标签浮动，并将宽度设置为960px */
.mainBox .content {
	margin:0 21% 0 41%;
	background-color:#000000;
} /* 设置主要内容区域的内层div标签外补丁并设置宽度为440px，留出空白的位置给左右两列 */
.subMainBox {
	float:left;
	width:40%;
	margin-left:-100%;
	margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
	padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */
	background-color:#666666;
} /* 将次要内容区域设置左浮动，并设置宽度为300px，负边距为左边的-960px */
.sideBox {
	float:left;
	width:20%;
	margin-left:-20%;
	margin-bottom:-9999px; /* 负边距实现等高效果必须条件一 */
	padding-bottom:9999px; /* 负边距实现等高效果必须条件二 */
	background-color:#666666;
} /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */
.footer {
	clear:both;
}