當你在網頁中看視頻的時候，一般頁面中都會有個播放器，你會注意到，播放器的左面一般都會有個可伸縮的列表，如圖雲迅雷播放頁.
下面我提供兩種解決方案：
html代碼一般是這樣的：
<div class="content" id="main">
<div class="con_right">
<div class="right_margin">
<div>播放頁部分</div>
</div>
</div>
<div class="con_left">
<div>左邊欄內容</div>
</div>
</div>
高度自適應瀏覽器全屏解決方法：
a)、用樣式表控制
.content{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
overflow: hidden;
background:#232632;
}
以上代碼使最外層容器絕對定位之後，上下左右四邊都與瀏覽器可視化邊框貼緊，從而做到了適配各種屏幕，但這種方法方法不適用於ie低端瀏覽器。
b)、用js動態讀取瀏覽器可視化高度並賦值與外層容器class=”content”
高度自適應js代碼
+function(){
var oMain = $('#main'); // 定義變量
var wHeight = $(window).height();// 獲取瀏覽器可是化窗口高度
oMain.height(wHeight);// 外層容器高度賦值
window.onresize = function(){
//調用onresize事件在窗口或框架被調整大小時發生
var wHeight = $(window).height();
oMain.height(wHeight);
}
}();
考慮兼容高低端瀏覽器，a方案不適用，b方案可以使用。
寬度自適應佈局（左側定寬）方法：
方法一：負邊距
樣式表代碼：
.con_left{
float:left;
clear:left;
width:144px;
height:100%;
};
.con_right{
float:right;
width:100%;
}
.right_margin{
margin-left:144px;
};
方法二：絕對定位用Js動態獲取右側可變寬度
樣式表代碼：
.con_left {
position: absolute;
bottom: 0;
left: 0;
top: 0;
width: 144px;
height: 100%;
background: #232632;
border-right:1px solid #000000;
}
.con_right{
position: absolute;
right: 0;
height: 100%;
width: 100%;
};
.right_margin{
position: absolute;
bottom: 0;
left: 144px;
top: 0;
right:0;
}
右側寬度取值js代碼
+function(){
var width = $(window).width()-$('.con_left').width();
$('.con_right').width(width_spread);
window.onresize = function(){
//調用onresize事件在窗口或框架被調整大小時發生
var width = $(window).width()-$('.con_left').width();
//獲取右側寬度=瀏覽器寬度-左側變化寬度（伸縮狀態）
$('.con_right').width(width_spread); // 右側寬度賦值
}
}();
方案一、二實現效果無兼容性差異。方案一簡單易懂的css樣式表，但無法滿足播放頁右側單一內容撐開全屏的要求，這裏推薦使用方案二。
綜上所述：播放頁自適應寬高二欄佈局我們推薦使用的最終方案爲：方案b+方案二
注：要引入jq。