標籤：
最近寫了一個項目，寫頁面的結構，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。
網頁html結構右側欄固定，左側自適應大小。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
