css - 用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 auto，然后不要强制固定标题和左侧边栏，只需设置一个高度内容并使其溢出隐藏和滚动