Question

index2.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="index2.css">
    </head>
    <body>
        <div id='menuFrame'>
        </div>
        <div id='banner'>
            &nbsp;
        </div>
    </body>
</html>

index2.css：

body {
    margin: 0px;
    padding: 0px;
}
#menuFrame {
    content: "";
    height: 10%;
    width: 100%;
    background: rgba(255, 0, 0, 0.4);
    position: fixed;
}
#banner {
    height: 10%;
    width: 100%;
    background: rgba(0, 255, 0, 0.4);
}

我想要一个固定的always-on-top div和一个重叠的可滚动div。两者的宽度都设置正确，但不是高度。

不能也为什么要显示空div而不同：＆amp; nbsp / content：=“”......但我可以忍受。

编辑：当我改变

时

身高：10％

带

身高：50px

对于这两个div我得到了我想要的......为什么？

http://jsfiddle.net/axj3yocz/

Answer 1

好吧..忘记第一个答案。

所以在我在jsfiddle中测试你的代码后，我在两个div中添加了一个位置：fixed。而这个结果是“一个”div但混合色。

您可以查看http://jsfiddle.net/

把它放在css文本框中：

    body {
       margin: 0px;
       padding: 0px;
   }
   #menuFrame {
       content: "";
       height: 10%;
       width: 100%;
       background: rgba(255, 0, 0, 0.4);
       position: fixed;
   }
   #banner {
       height: 10%;
       width: 100%;
       background: rgba(0, 255, 0, 0.4);
       position:fixed;
   }

，这在html区域：

    <div id='menuFrame'>
    </div>
    <div id='banner'>
        &nbsp;
    </div>

我不确定这是否是您想要的结果..所以请在jsfiddle

上查看

更新：

试试这个：

      body {
            margin: 0px;
            padding: 0px;
      }
      #menuFrame {
            content: "";
            height: 10%;
            width: 100%;
            background: rgba(255, 0, 0, 0.4);
      }
      #banner {
            height: 10%;
            width: 100%;
            background: rgba(0, 0, 255, 0.4);
            position:fixed;
     }

它给出一个带有混合颜色的div（两个div的颜色）

如何用两个不同的定位实现两个重叠div的相同高度？

1 个答案: