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

時間 2019-11-10

原文原文鏈接

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

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

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

1.左右欄高度必定，若是仍想按照左側固定的模式寫右側固定的效果。能夠以下寫：ide

能夠看到container下的兩個div進行了對調。spa

<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進行調換位置，則能夠寫以下代碼，code

  <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>