CSS 左边固定宽度右边自适应宽度总结

CSS 左边固定宽度右边自适应宽度总结

两个div并排，左边的宽度固定，右边自适应。 我的左边是导航栏，右边也分上下两部分。

整个页面：

html,body{
    margin:0px;
    height:100%;
}

1、左侧导航栏，使用position: absolute;

.main-sidebar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 100%;
    width: 240px;
    background-color: #222d32;
}

2、右边

.right{
    margin-left: 240px;
    height:100%; 
    font:normal 20px/24px 'MicroSoft YaHei';
}

右侧又分上下两部分，固定上面的Height即可：

.topbar{
    height: 50px; 
    border: 1px solid #005580
}

还可以通过float:left的属性。