JSFiddle - React, Tailwind, and code Playground

by XianfaLang

HTML

<!-- 两列等高（负边距实现）-->
<div id="header">头部信息</div>
<div id="container">
	<div class="mainBox">
		<p>主要内容区域</p>
		<p>增加文字看看效果</p>
		<p>两列等高的页面结构布局方式</p>
		<p>可以算是一种“障眼法”</p>
		<p>让浏览者在视觉上感觉到页面中的两列是相同高度的即可</p>
	</div>
	<div class="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 {
	position:relative; /* 为其子元素的定位具有可参照的对象 */
	width:960px;
} /* 设置页面内容区域的宽度为960px */
.mainBox {
	width:680px;
	color:#FFFFFF;
	border-right:280px solid #AAAAAA; /* 将边框的宽度值设置与侧边栏的宽度相同，并用边框色“取代”侧边栏的背景色 */
	background-color:#333333;
}
.sideBox {
	position:absolute;
	top:0;
	right:0; /* 使用定位方式将侧边栏绝对定位在内容区域的右上方 */
	width:280px;
	color:#FFFFFF;
}
#container:after {
	display:block;
	visibility:hidden;
	font-size:0;
	line-height:0;
	clear:both;
	content:"";
} /* 清除内容区域的左右浮动 */