我一直在尝试获得一个带有固定标题的布局（工作正常），并且左列也固定为可滚动内容。
我有以下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 ”也滚动，这不是想要的效果。我的代码中缺少什么？
一件事是所有内容（包括标题）即使水平调整大小也是居中的。