標籤：高度自適應 style blog http color io os ar div
兩列布局，一邊固定，一邊自適應，很常見，可不見得都能寫好，就像我。
在一通搜尋後，總結了幾種方法。
1、CSS3 Flex-Box
其實我最早知道的是這種方法，之前也記錄過。
彈性方塊模型 (Flexible Box Model)筆記
2、來自div+css自適應兩列布局，一列定寬，一列自適應
代碼：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>.main,.sitebar { height: 300px; font: bolder 20px/300px ‘微軟雅黑‘; color: #fff; text-align: center;}.main { width: 100%; float: left;}.main .content { margin-left: 200px; background-color: red;}.sitebar { width: 200px; float: left; margin-left: -100%; background-color: green;}</style></head><body><div class="main"> <div class="content">右側主體自適應區塊</div></div><div class="sitebar">左側定寬200px區塊</div></body></html>
效果：
3、來自經典DIV+CSS案例--兩列高度自適應
代碼：
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>兩列高度自適應</title><style type="text/css"> * { margin:0; padding:0; } #main { overflow:hidden; text-align: center; height: 300px; } .sidebar { float:left; width:150px; background:#ff0000; } .content { background:#333333; overflow:hidden; _float:left;/*相容IE6*/} .row { margin-bottom:-10000px; padding-bottom:10000px;/*內外補丁是關鍵*/ }</style></head><body><div id="main"> <div class="sidebar row"> 左側150px </div> <div class="content row"> 右側自適應 <span style="float:right; font-size:0; position:relative; "> </span> <!--為了萬惡的ie6--> </div></div></body></html>
效果：
CSS兩列調適型配置
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
