页面自适应布局解决方案

当你在网页中看视频的时候，一般页面中都会有个播放器，你会注意到，播放器的左面一般都会有个可伸缩的列表，如图云迅雷播放页.

下面我提供两种解决方案：

html代码一般是这样的：

        

 

       

           

播放页部分

       

   

   

       

左边栏内容

   

高度自适应浏览器全屏解决方法：

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。