在寫一個移動端網頁，發現網頁的頭部搜索框兩邊各有固定寬度的按鈕，搜索框可以根據寬度的變化來改變自己的寬度，達到填充的目的，也就是一種自適應吧，下面寫寫自己嘗試的幾種方法
一 利用css3 的width：calc（100% - npx）；
<body>
<div style="border: 1px solid black;width: 100%;height: 100px">
<div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div>
<div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div>
</div>
</body>
注意 width:calc(100% - 120px); 兩邊都有空格，不要問我為什么會知道。。。
二 利用display:table和display:table-cell；
<body>
<div class="box" style="border: 1px solid black;width: 100%;height: 100px;display: table">
<li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li>
<li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li>
</div>
</body>
display:table 這個屬性很少用，display:table-cell可以自適應寬度，這點倒是挺好的。
三 利用position:absolute；
<body>
<div style="height: 100px;width: 100%;border: 1px solid red">
<span style="display: block;float: left;height: 100px;width: 100px;background: green"></span>
<span style="display: block;float: left;height: 100px;position: absolute;left: 100px;right: 100px;background: yellow"></span>
<span style="display: block;float:right;height: 100px;width: 100px;"></span>
</div>
</body>
利用position:absolute；不固定寬度，設置高度，然后將左右定位為預留的位置，然后就會自適應屏幕寬度了。
四 關於上下自適應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body >
<div style="position: absolute;top: 0;bottom: 0;width: 100%;border: 1px solid black">
<div class="header" style="height: 100px;background: red"></div>
<div class="mid" style="height:calc(100% - 200px);background: yellow"></div>
<div class="footer" style="height: 100px;background: green"></div>
</div>
</body>
</html>
這個就是利用position:absolute；上下都定位到邊上，就會自適應了。。