在Web项目中两栏固定宽度居中的方式较多，三栏比较少见，一栏在某些场合还是有用的，比如说有整版的表格列表。因此我们的程序有必要能在两种方式中切换。
以前我们使用的切换方式是两个页面模版，这种方式稍嫌麻烦一些，因为多了一个文件需要维护。现在使用JS也能达到同样的效果。让我们先看看siderbar和concept两个div的css定义：
#sidebar{
margin-left:auto;
margin-right:auto;
width:191px;
height:480px;
float:left;
background-color:#fafafa ;
border-top:1px #e4e4e4 solid;
border-bottom:1px #e4e4e4 solid;
border-left:1px #e4e4e4 solid;
padding:2px;
}
#concept{
margin-left:auto;
margin-right:auto;
padding:10px;
width:759px;
height:480px;
float:left;
border:1px #e4e4e4 solid;
}
这两者之所以能并列的原因是一是向左浮动，二是二者的宽度加起来正好等于页面的总宽度950.如果我们需要变换成一栏方式，把siderbar隐藏，使concept的宽度变成950，这样不就可以了吗？这使用JavaScript很容易办到，代码如下：
var sidebar=$("sidebar");
sidebar.style.display="none";
var concept=$("concept");
concept.style.width=950;
再把它包装成一个函数，在需要单栏的页面中的窗口加载事件中调用这个函数，就能把两栏变成一栏：
//-- Common.js中
function makeConceptFullScreen(){
var sidebar=$("sidebar");
sidebar.style.display="none";
var concept=$("concept");
concept.style.width=950;
}
..
//-- userMenuIntroBody.jsp中
window.onload=function(){
// 隐藏边栏，加宽内容栏，使得内容如同全屏一样
makeConceptFullScreen();
}
--全文完--