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>