0

Web サイトの 4 画面レイアウトの分割に取り組んでいます。私はちょうど 4 を設定したと思ったdivs,50%のheight and width, float left and right.

しかし、このすべての真ん中にメニュー バーを追加する必要があります。最初の 2 つの div の後に div を追加し、メニュー バーのdiv" clear"cssタグを " both" に設定しました。

私はほとんどそこにいます...問題は、このスクロールバーが今から表示されていることです.50％+メニューバーの高さ+さらに50％です...

ウィンドウが小さいときに右側にスクロールバーを表示せずに、メニューバーをこれに合わせる方法を見つける必要があります。（最初はoverflow : hiddenを使用していましたが、画面が小さい人にはメニューからドロップダウン項目が表示されません）。

これが私のフィドルです（これは私の問題を示す簡単な方法です）

何か案が？ありがとうございました！

編集 ：

ウィンドウのサイズを変更して画像をスクロールするとどうなるか見てみましょう: http://jsfiddle.net/ttCJG/2/

4

2 に答える 2

0

これを試してください - http://jsfiddle.net/ttCJG/1/

#menu-bar {
    height:30px;
    width:500px;
    background-color:black;
    left:0;
    right:0;
    margin: auto;
    clear:both;
    color:white;
    position: absolute;
    top: 50%;
    margin-top: -15px;
}​
于 2012-07-24T21:46:32.783 に答える
0

上部と下部<div>の sからメニュー バーの高さを削除します

例:
上 Div: 40%
メニュー: 20%
下 Div: 40%

微調整が必​​要かもしれませんが、簡単に言えばそれだけです。次の CSS のようなものを試してください。

html, body {
 width:100%;
 height:100%;
 padding:0;
 margin:0;   
}
#test1 {
 width:50%;
 height:47%;
 float:left;
 background-color:red;       
}
#test2 {
 width:50%;
 height:47%;
 float:right;
 background-color:blue;       
}
#test3 {
 width:50%;
 height:47%;
 float:left;
 background-color:green;       
}
#test4 {
 width:50%;
 height:47%;
 float:right;
 background-color:yellow;       
}
#menu-bar {
 height:6%;
 width:100%;
 background-color:black;
 margin:0;
 clear:both;
 color:white;
}​
于 2012-07-24T21:47:56.450 に答える