布局方法

1、左栏高度随右栏高度自适应相等

<style type="text/css">
　　#test{overflow:hidden; zoom:1;}
　　.left{width:200px; margin-bottom:-3000px; padding-bottom:3000px; background:#cad5eb; float:left;}
　　.center{height:300px; margin:0 0 0 210px; background:#ffe6b8;}
</style>

<div id="test">
    <div class="left">左边，无高度属性，自适应于最高一栏的高度</div>
    <div class="center">中间，高度300像素，左右两栏的高度与之自适应    </div>
</div>

 

2、CSS实现宽度自适应100%，宽高1:1的比例的正方形

#square{  
    width:30%;  
    height:30vw;  //vw是相对于视口宽度百分比的单位，1vw = 1% viewport width
    background:gray;  
}  

　　

#square{  
    width:30%;  
    height:0;  
    padding-bottom: 30%;  
    background:gray;  
}  

　　

 3、footer置于页面最底部

<style type="text/css">
    .fixed-bottom {position: fixed;bottom: 0;width:100%;}
</style>

<div class="header">header</div>
<div class="main">main content</div>
<div class="footer">footer</div>

<script type="text/javascript">
$(function(){
      function footerPosition(){
            $(".footer").removeClass("fixed-bottom");
            var contentHeight = document.body.scrollHeight,//网页正文全文高度
                winHeight = window.innerHeight;//可视窗口高度，不包括浏览器顶部工具栏
            if(!(contentHeight > winHeight)){
                //当网页正文高度小于可视窗口高度时，为footer添加类fixed-bottom
                $(".footer").addClass("fixed-bottom");
            } else {
                $(".footer").removeClass("fixed-bottom");
            }
        }
        footerPosition();
        $(window).resize(footerPosition);
});
</script>

  4、内容自适应分布

<style type="text/css">
.box {
  width: 256px; 
  height: 256px;
  /* 两端对齐关键 */
  text-align: justify;
}
/*:before 伪元素用于辅助实现底对齐*/
.box:before {
  content: "";
  display: inline-block;
  height: 100%;
}
/*:after伪元素用于辅助实现两端对齐*/
.box:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.bar {
  display: inline-block;
  width: 10%;
  height: 256px;
  background: #000;
}
</style>
<div class="box"><i class="bar"></i> <!-- 不可以换行 -->
  <i class="bar"></i>
  <i class="bar"></i>
  <i class="bar"></i>
  <i class="bar"></i>
  <i class="bar"></i>
</div>

　注意： HTML 代码有些地方不能换行或者空格

　效果如下：自适应平局分布