網頁html結構右側欄固定，左側自適應大小。

本文轉載自查看原文 2015-01-27 18:06 4781

最近寫了一個項目，寫頁面的結構，html樹形結構是有header，container，footer部分，其中container部分是右側欄是固定寬度，左側是自適應寬度與屏幕高度。

第一次寫的博客文章是container部分是左側欄固定，右側是自適應效果。左側欄固定是很好寫，但右側欄固定卻不很好寫，以下是基本的結構與樣式。

 <div class="container" style="overflow:hidden;">
        <div class="left leftCont">
        </div>
        <div class="right rightSide">
        </div>
</div

1.左右欄高度一定，如果仍想按照左側固定的模式寫右側固定的效果。可以如下寫：

可以看到container下的兩個div進行了對調。

<style type="text/css">
       
        .rightSide {
            width: 200px;
            height: 600px;
            background: red;
            float: right;
        }
        .leftCont {
            width: 100%;
            margin-right: 200px;
            background-color: blue;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="container" style="overflow:hidden;">
        <div class="rightSide">
        </div>
        <div class="leftCont">
        </div>
    </div>
</body>

2.如果不想將兩個子div進行調換位置，則可以寫如下代碼，

  <style type="text/css">
        .rightSide {
            width: 200px;
            height: 600px;
            background: red;
            float: right;
        }

        .leftCont {
            float: left;
            width: 100%;
            margin-right: 200px;
            background-color: blue;
            margin-bottom: -2000px;
            padding-bottom: 2000px;
        }
    </style>
</head>
<body>
    <div class="container" style="overflow:hidden;">
        <div class="left leftCont">
        </div>
        <div class="right rightSide">
        </div>
    </div>
</body>

這樣界面實現效果，並且左側的高度大小跟右側div的高度一樣。其中關鍵的兩句話是：margin-buttom：-2000px; padding-buttom：2000px; 並且3000px不是固定的值，只要是比實際需求的高度大就ok。

免責聲明！

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

猜您在找 網頁布局-左側固定，右側自適應 CSS自適應布局(左右固定中間自適應或者右側固定左側自適應) css左右布局，左側固定，右側自適應 CSS實現左側固定，右側自適應布局 flex左側固定寬度，右側自適應布局 css實現右側固定寬度，左側寬度自適應 css經典布局之左側固定大小右側自動適應 css布局--兩列布局，左側固定，右側自適應（其中左側要可以拖動，右側水平滾動條）兩列布局——左側寬度固定，右側寬度自適應的兩種方法 CSS布局 -- 左側定寬，右側自適應