sharepoint母版页固定宽度与纵向滚动条靠右边(修改版)

之前文章对母版页固定宽度,但在添加list item时页面布局出现问题,后来找到方法修改这个bug,修改之后如下:


页面固定宽度为 990px, 整体居中,将纵向滚动条,移到浏览器的最右边
加css与js:

<style type="text/css">
#s4-bodyContainer
{
width
: 990px !important;
margin-left
:auto;
margin-right
:auto;
}

/* Aligns the Top Bars */
.ms-cui-ribbonTopBars
{
width
: 990px !important;
margin-left
:auto;
margin-right
:auto;
}

/* Turns off the border on the bottom of the tabs */
.ms-cui-ribbonTopBars > div
{
border-bottom
:1px solid transparent !important;
}
</style>

//当列表项多,超出指定宽度时后,背景为空白,所以根据列表项长度,将页面内容范围根据内容扩大,
<script type='text/javascript'>

$(document).ready(
function(){
//Elements with the potential to be too wide.
  elements = $(".ms-bodyareacell > div > *, .main-container > div > *");
  leftPanelWidth
= $("#s4-leftpanel").width();

  //For each Elements
  $(elements).each(function(){
    //if it's wider than the side width
    if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
    {
      //Calculate the new width taking the left nav into account
      newWidth = leftPanelWidth + $(this).width();
      //Set the width!
      $("#s4-bodyContainer").attr("style","width:"+newWidth +"px!important")
    }
  });
});
</script>

最后:

找到ID="s4-workspace",添加:
<div ID="s4-workspace" class="s4-nosetwidth">

另外,详细CSS说明与效果可参考

posted on 2012-06-19 15:50  向振文  阅读(895)  评论(1编辑  收藏  举报