常見css垂直自適應布局（css解決方法）

本文轉載自查看原文 2015-04-22 22:40 10236 css和js常見問題

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>

這就最終的結果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css常見自適應布局 css自適應布局 CSS 自適應布局 css 多欄自適應布局 css多欄自適應布局 CSS布局之-高度自適應 css--常見左右盒子寬度高度自適應布局 CSS兩列及三列自適應布局方法整理 css flex經典三大布局：垂直居中，兩列等高，自適應寬 Css3 常用布局方式一行兩列&高度自適應&垂直方向居中