保留左列固定与CSS

Question

我一直在试图获得与固定标题（工作正常）和左栏固定与滚动内容的布局。

我有div的以下布局：

<header> 
    <div class="header_content"> 
     <div class="search_box_area"> 
      <div class="input_box"> 
       <input name="search_input" type="text" class="main_input_search" maxlength="75" /> 
      </div> 
      <div class="input_box_glass"></div> 
     </div> 
     <div class="advanced_search">advance search</div> 
     <div class="icons_container"> 
      <div class="header_icon icon_1"></div> 
      <div class="header_icon icon_2"></div> 
      <div class="header_icon icon_3"></div> 
     </div> 
    </div> 
</header> 
<div class="content"> 
    <div class="left_column"> 
     <div class="left_column_menu"> 
      <div class="left_menu profile_left_menu"></div> 
      <div class="left_menu multi_left_menu"></div> 
      <div class="left_menu calendar_left_menu"></div> 
      <div class="left_menu app_left_menu"></div> 
      <div class="left_menu contact_left_menu"></div> 
      <div class="left_menu noticias_left_menu"></div> 
     </div> 
     <div class="left_column_degraded"></div> 
    </div> 
    <div class="space_1"></div> 
    <div class="main_user_content"> 
     -------- Here goes the scrollable content -------- 
    </div> 
</div> 

left_column有一组垂直显示图标始终应该是可见的，即使该内容滚动。

每个DIV的CSS是下一个：

header { 
    width:100%; 
    min-width:980px; 
    position:fixed; 
    top:0; 
    height:43px !important; 
    background-image:url(/images/header/header_background.png); 
    background-position:center top; 
    background-repeat:no-repeat; 
    z-index:999; 
} 
.header_content { 
    width:980px; 
    height:43px; 
} 
.content { 
    position:relative; 
    top:-6px; 
    width:980px; 
    padding:43px 0 0 0; 
    margin:0 auto 0 auto; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
} 
.space_1 { 
    width:18px; 
    height:100%; 
} 
.main_user_content { 
    min-width:520px; 
    margin-left:70px; 
    margin-right:380px; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
} 
.left_column { 
    top:0px; 
    left:0; 
    bottom:0px; 
    width:52px; 
    height:100%; 
    position:absolute; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -o-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    background-color:#F5F5F5; 
} 
.left_column_menu { 
    width:52px; 
    background-color:#F5F5F5; 
    height:100%; 
} 
.left_column_degraded { 
    position:absolute; 
    top:0px; 
    left:-110px; 
    width:110px; 
    height:100%; 
    background: #ffffff; /* Old browsers */ 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
    background: -moz-linear-gradient(left, #ffffff 0%, #ededed 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(100%,#ededed)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(left, #ffffff 0%,#ededed 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(left, #ffffff 0%,#ededed 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(left, #ffffff 0%,#ededed 100%); /* IE10+ */ 
    background: linear-gradient(left, #ffffff 0%,#ededed 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed',GradientType=1); /* IE6-8 */ 
} 
.left_menu { 
    width:32px; 
    height:32px; 
    margin-bottom:13px; 
} 

的问题是，“left_column”滚动太这不是所期望的效果。我的代码中缺少什么？

有一件事是所有的内容（包括标题）居中，即使它是水平调整大小。

Answer 1

你只需要改变你的.left_menu规则的位置：

position:fixed; 

的基础上你正在尝试做的，你可能会更好创造周围的一切包装与980px宽度和边距设置为0自动，然后而不是强制标题和左边栏被固定只是设置内容的高度，并使其溢出隐藏和滚动