我在下面创建了一个简单的 HTML 布局，它显示了一类左栏和一个内容区域。我计划为此添加样式，以便在将内容添加到内容 div 时，左侧栏的高度将随之增加。
<body>
<div class="wrap">
<div class="header">
<h1>Main Title of Web Page</h1>
</div>
<aside class="left">
HTML </br>
CSS </br>
JavaScript </br>
</aside>
<aside class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, reiciendis, ea, dignissimos illum et laborum voluptate dolorem dolores vel minima fugit expedita perspiciatis est vero reprehenderit aperiam veritatis officia enim?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, libero consequuntur nostrum sunt molestias ea similique harum voluptates officia eius distinctio impedit autem ut alias beatae neque minima suscipit facere!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, facilis harum aperiam maxime incidunt quasi eveniet iste quas atque deserunt ad accusantium amet nostrum explicabo corporis laborum tempore provident quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, eos, illo odit vero quo atque perspiciatis eveniet quidem necessitatibus omnis in nobis reprehenderit ea minus repellendus illum totam id. Aliquam?</p>
</aside>
<footer style="clear:both">
<p>Copyright © CA</p>
</footer>
</div>
</body>
下面是我到目前为止所做的，但是，当我添加更多内容时，文本会溢出 div 并且看起来很难看。
body{
margin:0px;
padding: 0px;
}
p{
padding:10px 0px;
}
.wrap{
width: 960px;
margin: 25px auto;
}
.header{
background-color: #faa600;
height:100px;
width: 960px;
margin:0px;
padding: 0px;
}
.left, .content{
height: 400px;
padding: 10px;
}
.left{
float:left;
width: 180px;
margin: 0px;
background-color: #fbd917;
}
.content{
width: 740px;
float: right;
margin: 0px;
background-color: #eeeeee;
}
footer{
background-color: #faa600;
width: 960px;
height: 50px;
text-align: center;
}