margin+absolute布局：右栏固定主内容自适应 demo

margin+absolute布局：右栏固定主内容自适应 demo

头部

Aside
侧边栏区域

Main
主内容区域

底部

#demo{width:80%;margin:auto;height:300px;}
#hd2,#ft2{height:50px;background-color:#aaa;}
#bd2{position:relative;margin:10px 0;}
#aside2{position:absolute;top:0;right:0;width:200px;background:#ccc;}
#main2{margin-right:210px;background-color:#aaa;}

#hd3,#ft3{height:50px;background-color:#aaa;}
#bd3{position:relative;margin:10px 0;}
#aside3{position:absolute;top:0;left:0;width:200px;background:#ccc;}
#main3{margin-left:210px;background-color:#aaa;}

#hd4,#ft4{height:50px;background-color:#aaa;}
#bd4{zoom:1;overflow:hidden;margin:10px 0;}
#aside4{float:left;width:200px;background:#ccc;}
#main4{margin-left:210px;background-color:#aaa;}

#bd5{
padding-left:210px;
}
#aside5{
float:left;
position:relative;
left:-210px;
width:200px;
margin-left:-100%;
background:red;
}
#main5{
float:left;
width:100%;
background:pink;
}
#hd5,#ft5{height:50px;background-color:#aaa;}

#hd6,#ft6{height:50px;background-color:#aaa;}
#bd6{zoom:1;overflow:hidden;margin:10px 0;padding-right:210px;}
#aside6{float:left;position:relative;right:-210px;width:200px;margin-left:-200px;background-color:#ccc;}
#main6{float:left;width:100%;background-color:#aaa;}

margin+absolute布局：左栏固定主内容自适应 demo

头部

Aside
侧边栏区域

Main
主内容区域

底部

margin+float布局：左栏固定主内容自适应 demo

头部

Aside
侧边栏区域

Main
主内容区域

底部

float + 负margin 方式

头部

主内容栏自适应宽度

侧边栏固定宽度

底部

圣杯布局之左栏固定主内容自适应

头部

主内容栏自适应宽度

侧边栏固定宽度

底部