使用负边距

负边距的作用：1.左右自动适应布局

                    2.页脚固定

 

HTML代码结构：

<div class="wrapper">
  <div class="left_div">
    <li><a href="#">首页</a></li>
    <li><a href="#">最新动态</a></li>
    <li><a href="#">联系我们</a></li>
    </ul>
  </div>
  <div class="conter_div">
    <p>主体内容</p>
    <p>主体内容</p>
  </div>
  <div class="clear"></div>
  <div class="footer">
    <p>©依米吴2012年3月 </p>
  </div>
</div>

 1.左右自动适应布局

 

.conter_div {/*左右大小自动适应布局开始*/
    width:100%;
    margin-right:-200px;/*右边距为负就是在左边空出200px*/
    background:#FFF;
    float:right;
}
.left_div {
    float:left;
    width:200px;
    background:#9F3;
}/*左右大小自动适应布局结束*/ 

 

 2.页脚固定

.wrapper {/*页脚固定在底部开始*/
	min-height:100%;
	margin-bottom:-100px;
	position:relative;
}
.clear {
	clear:both;
}
.footer {
	background:#999;
	height:100px;
	width:100%;
	bottom:0px;
	position:relative;
}/*页脚固定在底部结束*/

 浏览器兼容

<!—[if lt IE 7]>
  <style type="text/css">
  .wrapper {
	  height:100%;
	  }
  </style>
<![endif]—>

 

转载于:https://www.cnblogs.com/JaneYiMi/archive/2012/03/22/2411712.html