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的属性。