2

私のサイトには、3 つの div、1 つのヘッダー、1 つのメイン コンテンツ、右側にサイドバーがあります。サイドバーは実際の問題です。サイドバーが常にブラウザー ウィンドウの右側に固定されるようにしたいのですが、ユーザーがウィンドウのサイズを変更してメインとサイドバーよりも幅が小さくなると、サイドバーはメイン コンテンツの左端で停止します。

ユーザーが最初に Web ページにアクセスし、少なくとも Mac で「緑色の最大化ウィンドウ ボタン」を押すと、ウィンドウのサイズが変更され、メイン コンテンツとサイドバーが隙間なく端から端まで配置されるようになります。

私のコードでは、ウィンドウのサイズを可能な限り最小の幅に変更してからウィンドウの最大化ボタンを押すと、2 つの div の間に 16 ピクセルのギャップがあることを除いて、すべて正常に動作します。

私のコード:

HTML:

    <div id="header">Header</div>
    <div id="container">        
        <div id="main">
        <p> Left </p>
        </div>

        <div id="sidebar">
        <p> Right </p>
        </div>
    </div>

CSS:

body{
margin:0 0;
min-width:606px;
}

#header {
    padding:5px 10px;
    background:#00FF00;
    height:100px;
}

#container{
    min-width: 865px;
    min-height: 50px;
}

#main {
    float:left;
    min-width: 622px;
    background:#FF0000;
}

#sidebar {
    float:right;
    width:243px;
    min-height: 50px;
    background:#0000FF;
    margin-bottom: -20px;
}
4

1 に答える 1

2

参照: jsFiddle (アドレスバーで、 を削除/show/して jsFiddle 編集ページにアクセスします。 )

floatレイアウトを処理する代わりに、 tableandtable-cellを使用すると、目標を実現できます。XPマシン上のFirefox、Chrome、IE8でテストされ、動作しています。

HTML:

<div id="header">Header</div>

<div id="container">        

    <div id="main">
      <p>Main</p>
    </div>

    <div id="sidebar">
      <p>Sidebar</p>
    </div>

</div>

CSS:

body{
    margin: 0 auto;
    padding: 0;
}

#header {
    background: green;
    height: 100px;
    min-width: 865px;          /* Optional: This size is the same as #container width. */
}

#container{
    display: table;
    width: 100%;
    min-width: 865px;
    height: 50px;
}

#main {
    display: table-cell;
    /*min-width: 622px;*/     /* Not needed since #container min-width less #sidebar width will use remainder percentage space (since #container is set at 100%) */
    height: 100%;             /* Maximum height is set via #container height */
    background: red;
}

#sidebar {
    display: table-cell;
    width: 243px;            /* The fixed width of the sidebar */
    height: 100%;            /* Maximum height is set via #container height */
    background: aqua;
}
于 2012-07-27T05:12:30.823 に答える