美文网首页html和css
css实现侧边栏分栏高度和中间内容自动相等

css实现侧边栏分栏高度和中间内容自动相等

作者: 邢走在云端 | 来源:发表于2019-10-22 08:49 被阅读0次
    • 经常看见一个管理系统右侧边栏,要使得侧边高度随着和中间内容增多而增高。如图:

    犹如gif录制工具的原因出现白色丢帧情况,不要介意😂

    内容高度增加,侧边高度随之增加

    实现css代码:

        
    /* 父元素 */
    .wrap {
        overflow: hidden;
    }
    /* 左侧分栏 */
    .left {
        width: 200px;
        background: #f00;
        float: left;
         /*下面两个值要足够的大,大于内容高度*/
        margin-bottom: -30000px;
        padding-bottom: 30000px;
    }
    /*中间内容区域*/
    .center {
        height: 500px;
        background: #00f;
        margin: 0 10px;
    }
    

    完整代码

    相关文章

      网友评论

        本文标题:css实现侧边栏分栏高度和中间内容自动相等

        本文链接:https://www.haomeiwen.com/subject/jomfvctx.html