1.先看一下效果

css随着容器变化但不随滚动条变化_css float 三栏 布局

头行、脚行和中间部分的最小宽度可设，当浏览器视窗宽度大于此值时，按比例增长，中间部分划分为三栏，三栏宽度比例固定，但宽度皆不固定，随览器视窗宽度变化而变化，三栏的高度自适应内容，脚标自动适应漂浮栏的长度大于中间栏的情况。

2.代码如下：

<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title></title>
     <meta charset="utf-8" />
     <style>
         *{margin:0px;/*取消部分浏览的默认值*/
         }
         div
         {
           padding:0;/*所有div内边距为0，主要征对定位类框，
                     如本例中的ground、leftbar、rightbar、middle等*/
         }
           
         div.ground
         {
             min-width:800px;
             margin:0 auto ;/*居中*/
             width:80%;/*相对body的宽度*/
             background-image:linear-gradient(90deg,#bdf5d9 20%,#fff 20%,#fff 80%,#f6cb8f 80%,#f6cb8f 100%);
             /*上句将三栏的背景色设在ground div上，避免出现背景色中断*/

         }
          div.footer,div.header{
             font-family:黑体;
             padding:0.5em;
             clear:both;
             /*clear:both使元素的左右两侧都没有飘浮元素
               换言之，如有飘浮元素在其左侧或右侧对其形成覆盖，则自动下
               移到合适位置，刚好避开飘浮元素对的覆盖。
             */

         }
          /*
             footer和hear的设置体现了css的一个原则，先合后分，不要颠倒。
              这样的好处是如果在合规则和分规则中有相同属性的不同设置，则
              总是以后边的分规则为叠层结果。应形成习惯，有利于后续维护。
          */
         div.header{
             text-shadow:3px 3px 3px #333;
             background-color:#f00;
             color:#fff;
         }
         div.footer{
             background-color:#70e1f6;
             color:#fff;
             text-shadow:2px 2px 3px #333;
         }
      
         div.leftbar
         {
             width:20%;/*/*宽度比例*/*/
             float:left;
             
         }
         div.rightbar{
             width:20%;/*/*宽度比例*/*/
             float:right;
             /*飘浮者的上限是其在文档位置的前的一个块元素的下边沿，下限没有规定*/
         }
         div.center
         {
             margin:0 20% 0 20%;
             /*仍在流中*/
         }

      

        
         

         div.forcontent
         {
             padding:0.5em;
             /*这是用于盛放内容的div,称之为内容框，位于定位框内*/
             /*定位框内必有内容框，为何不能合并在一起？如合并，*/
             /*则对其设置内边距时，会改变div的真实大小，从而使在ground中*/
             /*设置的颜色发生错位*/
         }
     </style>
 </head>
 <body>
     <div class="ground">
         <div class="header"><h1>这是头标</h1></div>
             <div class="leftbar">
                 <div class="forcontent">这是左侧栏.这是左侧栏.这是左侧栏.这是左侧栏.</div>
             </div>
             <div class="rightbar"><div class="forcontent">这是右侧栏.这是右侧栏.
                                       这是右侧栏.这是右侧栏.
                                       这是右侧栏.这是右侧栏.
                                       这是右侧栏.这是右侧栏.
                                       这是右侧栏.这是右侧栏.
                                       这是右侧栏.这是右侧栏.</div></div>
             <div class="center"><div class="forcontent">这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.这是中间栏.</div></div>
         <div class="footer">这是脚标。脚标div使用了clear:both;使左侧栏或右侧栏的长度长于中间栏时自动下降避开它们的覆盖。</div>
     </div>
  </body>
 </html>



3.应充分理解float属性的机制，float在父元素内浮动，可左靠或右靠，这样可做成左右栏，中间栏不浮动，但设置margin以避开浮动的左右栏的遮挡。