本大类 参考网站 没有布局 所有内容都在一行.. 很难阅读.

要了解布局. 必须先了解 display 属性

DIV左右布局

html,body { height: 100% }
#leftBig  { height: 100% ; width: 30%;  background-color:red; float:left;}
#rightBig { height: 100% ; width: 50%;  background-color:green; float:left;}

html body 高度设置 100% 然后两个div 都设置 float:left.

上下自适应

http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

必须 加上 top bottom 一起用 left right 一起用.

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>



#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
    
}