首页 > 代码库 > 页面自适应布局解决方案
页面自适应布局解决方案
当你在网页中看视频的时候，一般页面中都会有个播放器，你会注意到，播放器的左面一般都会有个可伸缩的列表，如图云迅雷播放页.
下面我提供两种解决方案：
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。
本文出自 “时光” 博客，请务必保留此出处http://timeblog.blog.51cto.com/8650972/1591831
页面自适应布局解决方案