常见css垂直自适应布局（css解决方法）

  1. css3的盒模型，

css3中添加弹性盒模型，最新弹性盒模型是flex，之前为box

<!DOCTYPE html>
<html >
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      html,body{
         width: 100%;
         height: 100%;
        margin: 0;
      }
      #wrap{
            display: flex;
            width: 100%;
            height: 100%;
            /*css3 的盒模型设置垂直排序 新老方法 box-orient老方法  flex-direction新方法*/
            box-orient:vertical;
            flex-direction:column;
        }
        .wrap_l
        {
            height: 150px;
            width: 150px;
            background: yellow;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
          flex:1;
          background: blue;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是上边部分<br />
            这是上边部分<br />
            这是上边部分
        </div>
        <div class="wrap_m">
            这是下部分
        </div>
</div>
</body>
</html>

2.position: absolute;绝对布局解决方案

绝对布局主要相对它的父dom做的操作，一般父dom要有足够的空间，如果涉及嵌套太多，父dom可以设置为postion:relative

<!DOCTYPE html>
<html >
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      html,body{
         width: 100%;
         height: 100%;
         margin: 0;
      }
      #wrap{
            width: 100%;
            height: 100%;
        }
        .wrap_l
        {
            height: 150px;
            width: 150px;
            background: yellow;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
          position: absolute;
          top:150px;
          width: 100%;
          background: blue;
          bottom: 0px;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是上边部分<br />
            这是上边部分<br />
            这是上边部分
        </div>
        <div class="wrap_m">
            这是下部分
        </div>
</div>
</body>
</html>

3.table布局

也可以用display:table仿table布局

display:table只支持IE8+以上

<!DOCTYPE html>
<html >
<head>
    <title>div + css宽度自适应（液态布局）</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <style type="text/css">
        /*左边栏，设定宽度*/
      html,body{
         width: 100%;
         height: 100%;
         margin: 0;
      }
      #wrap{
            width: 100%;
            height: 50%;
            display: table;
        }
        .wrap_l
        {
            height: 100px;
            display: table-row;
            background: yellow;
        }
        /*中间栏，宽度auto,*/
        .wrap_m
        {
          display: table-row;
          background: blue;
        }
        </style>
</head>
<body>
    <div id="wrap">
         <div class="wrap_l">
            这是上边部分<br />
            这是上边部分<br />
            这是上边部分
        </div>
        <div class="wrap_m">
            这是下部分
        </div>
         </div>
        <table style="height:50%;width:100%">
            <tr style="background: red;height:100px"><td > 上部分</td></tr>
            <tr style="background: yellow;"><td > 下部分</td></tr>
        </table>
</div>
</body>
</html>

 这就最终的结果

posted @ 2015-04-22 22:40  Peter_zhou  阅读(13423)  评论(1)  编辑  收藏  举报