1

左側には、状況依存のナビゲーション/情報バーがあります。情報がほとんどない場合もあれば、ページの高さ全体を占める場合もあります。フローティングなどに関する他の投稿でたくさんの提案を見てきましたが、試したことはありません。

.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
.groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}

したがって、サイドバー用の 2 つの div - ページの高さ全体を占める背景レイヤーを作成するためのものと、実際のコンテンツを含むテーブルボックスを作成するためのもの - 必要に応じて異なる背景色を使用できます。

<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>

次に、右側のメイン コンテンツがあります。ここでも、テーブル ボックスの背景色が異なり、ページの上に浮いているように見えるという考えです。

<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>

ブラウザの幅が狭すぎると、右側の div がサイドバーの下に表示されます。そこに部屋があるかどうか。

解決策: 問題は、div の親の 2 つのセットに定義されたサイズがないことでした。ブラウザ ウィンドウのサイズが変更されると、子は新しいサイズに収まるようにシャッフルされます。固定幅の親 div を定義し、overflow:auto を追加すると、ブラウザー ウィンドウが変更されても、親は変更されません。

注: これは明らかにこれを解決する最良の方法ではありません。これは、コンテンツ自体が動的にフォーマットされないことを意味します。固定幅になりました。私の場合、他に選択肢はありません。これは一時しのぎの解決策ですが、設計段階にある場合は、携帯電話からページを閲覧している人々や、低解像度の画面と巨大なテキストを使用している高齢者について考えてみてください。

混乱しやすい人のために明確にするために：

<div style="width:1053px;overflow:auto">
<div class="tablebox" style="margin-top:5px;width:247px;">Sidebar</div>
<div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"></div>
<div class="tablebox" style="margin-top:5px;width:777px;">Main content</div>
<div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"></div>
</div>

しかし、繰り返しになりますが、選択肢がある場合は、これを行わないでください。一部のデバイスでは、固定幅ではサイトがきれいに表示されません。

4

1 に答える 1

0 
<head>
    <style>
        body {
            padding:0;
            margin:0;
        }
        div {
            width:25%;
            height:25%;
        }
        div.left {
            background-color:red;
            float:left;
        }
        div.right {
            background-color:yellow;
            float:right;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

http://jsfiddle.net/8gNDU/2/

于 2013-01-26T20:11:30.603 に答える