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的情况下创建一个包装器，然后强制修改标题和左侧边栏只需设置一个高度内容并使其溢出隐藏和滚动

保持左列用css固定

1 个答案: