0

私は固定ヘッダー (正常に動作) とスクロール可能なコンテンツで固定された左の列を持つレイアウトを取得しようとしています。

私は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」もスクロールすることであり、それは望ましい効果ではありません。私のコードには何が欠けていますか?

1 つのことは、すべてのコンテンツ (ヘッダーを含む) が水平方向にサイズ変更されても中央に配置されることです。

4

1 に答える 1

1

.left_menu ルールの位置を変更するだけです:

position:fixed;

あなたがやろうとしていることに基づいて、980px の幅とマージンを 0 auto に設定してすべてのラッパーを作成した方がよいでしょう。その後、ヘッダーと左のサイドバーを強制的に固定する代わりに、コンテンツの高さを設定し、オーバーフローを非表示にしてスクロール可能にする

于 2012-06-24T19:19:57.590 に答える