JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 两列定宽结构（自适应高度） -->
<div id="header">头部信息</div>
<div id="container">
	<div class="mainBox">
		<p>主要内容区域ddd</p>
		<p>已经不再只是一行文字了</p>
		<p>要放很多很多东西到这个区域中来</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
	</div>
	<div class="sideBox">侧边栏</div>
  <!-- <p class="clearfix"></p> -->
</div>

<div id="footer">底部信息1</div>

CSS

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