#content
#content{ width:70%; background:#fff; position:absolute; left:30% } 宽度为70%,与bar相加刚好100%。背景为白色与body色加以区分
加点文字#header{ width:100%; background:#A94E38; color:#F0DFDB;}
高度自动,宽度100%
提示:先去掉body的初始样式
*{margin:0;padding:0;}
重点:去掉body的滚动条,并让wrap的高为90%,并当内容超过范围的时候出现滚动条:
html,body{ height:100%; width:100%; overflow:hidden;}
body{ background:#F0DFDB;}
#wrap{
height:90%;
overflow:auto;
overflow-x:hidden;
position:absolute; top:0; left:0;
width:100%;
}
#bar{ width:30%; position:absolute; left:0; background:#eee } 宽度为屏幕的30% 绝对定位, left位置为0, 因此靠左, 背景色为#eeeeee
加点文字#content{ width:70%; background:#fff; position:absolute; left:30% } 宽度为70%,与bar相加刚好100%。背景为白色与body色加以区分
加点文字