JSFiddle - React, Tailwind, and code Playground

by XianfaLang

HTML

<!-- 两列等高（其他方式）-->
<div id="header">头部信息</div>
<div id="container">
	<div class="mainBox" id="mainBox">
		<p>主要内容区域</p>
		<p>增加文字看看效果</p>
		<p>两列等高的页面结构布局方式</p>
		<p>可以算是一种“障眼法”</p>
		<p>让浏览者在视觉上感觉到页面中的两列是相同高度的即可</p>
	</div>
	<div class="sideBox" id="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

CSS

* {
	margin:0;
	padding:0;
} /* 设置页面中所有元素的内外补丁为0，便于更便捷的页面布局 */
#header, #footer {
	width:960px;
	height:30px;
	background-color:#E8E8E8;
} /* 设置头部信息以及底部信息的宽度为960px，高度为30px，并添加浅灰色背景色 */
#container {
	width:960px;
} /* 设置页面内容区域的宽度为960px */
.mainBox {
	float:left; /* 将主要内容区域向左浮动 */
	width:650px;
	color:#FFFFFF;
	background-color:#333333;
}
.sideBox {
	float:right; /* 将侧边栏向右浮动 */
	width:280px;
	color:#FFFFFF;
	background-color:#AAAAAA;
}
#container:after {
	display:block;
	visibility:hidden;
	font-size:0;
	line-height:0;
	clear:both;
	content:"";
} /* 清除内容区域的左右浮动 */

JavaScript

var mh = document.getElementById('mainBox');
var sh = document.getElementById('sideBox');
if (mh.clientHeight < sh.clientHeight)
{
	mh.style.height = sh.clientHeight + "px";
} else {
	sh.style.height = mh.clientHeight + "px";
}