CSS实现多列复杂界面布局

    1、此页面宽高均占满全屏
    这种占满全屏的布局，比较常见的是早期的一些论坛，width都设置为100%，现在也有不少论坛设置成了定宽~
    当前这种页面元素比较多的布局，建议加上最小宽度 & 最小高度，再加上宽度高度都是100%(要设置html,body高度为100%)。
    <style>
    html, body{
    height: 100%;
    }
    .wrapper{
    width: 100%;
    height: 100%;
    min-width: 1000px;
    min-height: 600px;

    }

 北京双眼皮医院http://www.dyjjkfq.cn

    </style>
    2、布局大致分为左中右结构（中间再分为左右布局）
    左右布局是CSS布局中比较常见的一种布局方式，这里的难点是，既要实现左右布局，又要保证width: 100%;（就是宽度不定，因为用户的浏览器宽度是各不相同的）。
    好了，直接上代码吧（实现方式应该不止这一种）：
    <style>
    .wrapper{
    min-width: 1000px;
    height: 100%;
    min-height: 600px;
    }
    // left：用左浮动 and 定宽
    .kf-left-panel{
    position: relative;
    float: left;
    width: 104px;
    background: $bg_black;
    height: 100%;
    overflow: auto;
    text-align: center;
    }
    // main left：用左浮动 and 定宽
    .kf-contact-panel{
    position: relative;
    float: left;
    width: 260px;
    height: 100%;
    border-right: 1px solid $border;
    overflow: hidden;
    }
    // main right: 设置margin-left和margin-right值，给left-panel和right-panel留出空间
    .kf-content-panel{
    position: relative;
    margin-left: 364px;
    margin-right: 260px;
    height: 100%;
    overflow: hidden;
    }
    // right：这个很好理解了，绝对定位，宽度正好是上面content留下的margin-right值
    .kf-right-panel{
    position: absolute;
    top: 0;
    right: 0;
    width: 260px;
    height: 100%;
    border-right: 1px solid $border;
    background: $bg_user_info;
    overflow: auto;
    }
    </style>