在我们日常开发中可能会有这样的需求:侧边栏的高度需跟内容区域高度一致,但是内容区域高度不固定。
这里只需利用border,就可轻松实现。
html部分如下:
<div class="box"> <nav class="aside"> <div>导航</div> </nav> <section class="content"> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> <div>内容</div> </section> </div>
css部分如下:
<style> .box{ border-left: 300px solid #222; } .aside{ float: left; width: 300px; margin-left: -300px; color: white; } .content{ background: #ccc; } </style>
效果如下: