Html 4个div和一个菜单栏（CSS）

我正在为一个网站设计一个四分为二的屏幕布局。 我想我只需要设置4个

div

，

50%

的

高度和宽度

，

左右浮动

<>但是我需要在这中间添加一个菜单栏。 我在前两个div之后添加了一个div，并将菜单栏

div

“

clear

”

css

标记设置为“

both

”

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

我只需要找到一种方法，使菜单栏适合这个…没有一个滚动条的权利时，窗口较小。（我使用的是overflow：起初是隐藏的，但是屏幕小的人看不到菜单中的下拉项）

这是我的（这是一个简单的方式来显示我的问题）

有什么想法吗？谢谢大家!

编辑：

查看调整窗口大小并滚动图像时的效果：

尝试以下操作-

#菜单栏{
高度：30px；
宽度：500px；
背景色：黑色；
左：0；
右：0；
保证金：自动；
明确：两者皆有；
颜色：白色；
位置：绝对位置；
最高：50%；
利润上限：-15px；
}​

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

s

示例：
排名靠前的歌手：40%
菜单：20%
底部跳水：40%

它们可能需要调整，但简而言之就是这样。尝试以下CSS：

html，正文{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
}
#测试1{
宽度：50%；
身高：47%；
浮动：左；
背景色：红色；
}
#测试2{
宽度：50%；
身高：47%；
浮动：对；
背景颜色：蓝色；
}
#测试3{
宽度：50%；
身高：47%；
浮动：左；
背景颜色：绿色；
}
#测试4{
宽度：50%；
身高：47%；
浮动：对；
背景颜色：黄色；
}
#菜单栏{
身高：6%；
宽度：100%；
背景色：黑色；
保证金：0；
明确：两者皆有；
颜色：白色；
}​

您可以将div的高度设置为45%左右，然后将菜单栏设置为10%。但是你可能不想要一个可变高度的菜单，但是如果你真的不想要一个滚动条的话，你可能不得不处理这个问题。或者你可以使用javascript来告诉你屏幕的尺寸并设置元素的高度，这就是我的想法。也许有人有主意？感谢您的评论watson@watson建议的是最简单的方法，您必须编写一个函数，使用页面宽度和高度计算相应的宽度和高度，并将其分配给4个分区和菜单分区。如果您需要计算宽度和高度的函数，请告诉我。它工作正常。除了我忘记添加的是图像。看看它的功能：…缩小窗口，然后向下滚动。容器div将停止在那里，一旦您滚动，图像将继续，但容器div没有颜色。这种情况是因为

height:100%在您的
身体上
-它将高度设置为可见窗口的100%