html - 4 个 div 和一个菜单栏 (CSS)

Question

我正在为网站拆分 4 个屏幕布局。我以为我只是设置 4 divs, 50%of height and width, float left and right。

但我需要在这一切的中间添加一个菜单栏。我通过在前 2 个 div 之后添加一个 div 来做到这一点，并将菜单栏div“ clear”css标签设置为“ both”。

我快到了......问题是从现在开始出现这个滚动条，它是 50% + 菜单栏高度 + 另一个 50%......

我只需要找到一种方法使菜单栏适合此...当窗口较小时右侧没有滚动条。（我最初使用的是溢出：隐藏，但小屏幕的人不会看到菜单中的下拉项目）。

这是我的小提琴（这是显示我的问题的简单方法）

任何想法？谢谢！

编辑 ：

看看当你调整窗口大小时它会做什么，并滚动图像：http: //jsfiddle.net/ttCJG/2/

Answer 1

试试这个 - 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;
}​

Answer 2

从顶部和底部移除菜单栏的<div>高度

示例:
Top Divs: 40%
Menu: 20%
Bottom Divs: 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;
}​