前言：
之前在項目中，經常會遇到左側的側邊欄能自由伸縮，右邊的內容區域能伴隨着左邊側邊欄的伸縮自由填滿寬度，假設右邊的內容區域有一個寬度填滿右邊區域，並且需要固定懸浮在右邊區域的底部，如下圖
一般情況下，要想保證右下角的懸浮區域寬度填滿右邊區域，並且可以在左邊區域伸縮、屏幕伸縮的情況下做自適應，必然要通過js來實現，並且監聽瀏覽器window的resize事件來動態的對其寬度做處理，這幾天無意中發現一個方法可以通過純css的方式來解決這個問題，代碼如下；
<!DOCTYPE html>
<html>
<head>
<title>fixed-table</title>
<style type="text/css">
html,
body {
margin: 0;
}
.left{
width: 20%;
height: 100%;
background-color: yellow;
position: fixed;
}
.right {
/*position: relative;*/
width: 80%;
height: 1800px;
float: right;
background-color: #aaa;
}
.pagination {
border: 1px solid red;
position: fixed;
bottom: 0;
background-color: blue;
color: #fff;
}
.pagination_inner {
display: table-cell;
width: 1%;
}
.pagination button {
background-color: #eee;
width: 100px;
height: 50px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class='left'>
<h1>左邊區域</h1>
</div>
<div class='right'>
<h1>右邊區域</h1>
<div class='pagination'>
<div class='pagination_inner'>
<h1>懸浮區域</h1>
</div>
</div>
</div>
</body>
</html>
我們可以通過實例看到設置步驟如下：
1. 給div.pagination（即右下角懸浮塊）設置position:fixed;bottom:0;
2. 給div.pagination_inner（即懸浮快內層）設置display:table-cell;width: 1%;
圖例如下：
兼容性這塊的話，我做了相關測試，chrome和firefox都支持，ie兼容到8，兼容性還是棒棒噠~~
這樣就滿足了我們的需求啦，這只是一個思路，這個佈局個人覺得可以適用於很多場景，比如說懸浮在底部的分頁，頂部的navbar等等~簡單分享下~順便自己mark一下下哈哈