CSS经典基础布局，自适应高度。header,content,footer.

2014/12/03 43573

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style text="text/css">
  /**
  布局
  */
  body {
  margin:0px;
  }
      #container {
        width:100%;
        margin:0 auto;/*主面板DIV居中*/
		border:1px solid red;
    }
	    #header {
        width:100%;
        float:left;
        clear:both;	
        border:1px #F00 solid;
    }
	#header_left {
        width:50%;

        border:1px #F00 solid;
		float:left;
    }
	#header_right {
        width:49%;
        border:1px #F00 solid;
		float:right;
    }
	  #main {
        width:100%;
        float:left;
        clear:both;	
        border:1px #F00 solid;
    } 
	#main_content{
		 width:100%;

		border:1px solid blue;
	}
	
	 #footer {
        width:100%;
        float:left;
        clear:both;	
        border:1px #F00 solid;
    }



  </style>
  <title>Document</title>

 </head>
 <body>
     <div id="container">
            <div id="header">
				<div id="header_left">
					头部左侧
				</div>
				<div id="header_right">
					头部右侧
				</div>
			</div>
            <div id="main">
				<div id="main_content">
							主页内容
				</div>
			</div>
            <div id="footer">底部（footer）</div>
    </div>
 </body>
</html>