border实现两栏等高布局

 在我们日常开发中可能会有这样的需求:侧边栏的高度需跟内容区域高度一致,但是内容区域高度不固定。

 这里只需利用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>

效果如下:

posted @ 2019-01-12 19:17  王小溪  阅读(437)  评论(0编辑  收藏  举报