JSFiddle - React, Tailwind, and code Playground
HTML
<!-- 两列等高（负边距实现）-->
<div id="header">头部信息</div>
<div id="container">
<div class="mainBox">
<p>主要内容区域</p>
<p>增加文字看看效果</p>
<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 {
width:960px;
overflow:hidden;
} /* 设置页面内容区域的宽度为960px */
.mainBox {
float:left; /* 将主要内容区域向左浮动 */
width:650px;
background-color:#333333;
}
.sideBox {
float:right; /* 将侧边栏向右浮动 */
width:280px;
background-color:#AAAAAA;
}
.mainBox, .sideBox {
padding:0 5px;
color:#FF0000;
margin-bottom:-9999px;
padding-bottom:9999px;
}
#container:after {
display:block;
visibility:hidden;
font-size:0;
line-height:0;
clear:both;
content:"";
} /* 清除内容区域的左右浮动 */