Question

所以我一直在为我和我的朋友制作一个网站，直到现在我已经制作了菜单栏和一个交流空间（<div> s）。但我似乎并没有让第二个div出现。我的问题在哪里？它为什么不出现？这是我的代码：

＆＃13;

#MenuBar {
  width: 100%;
  height: 10%;
  background-color: blue;
  border-radius: 30px;
  position: center;
  display: fixed;
}
body {
  background-color: black;
  background-repeat: no-repeat;

}
#MenuTabs {
  width:  75%;
  height: 75%;
  color: white;
  position: center;
}
#Messenger {
  width: 50%;
  height: 50%;
  background-color: white;
  display: fixed;
}

＆＃13;

<!-- The menu tab -->
<div id="MenuBar">
  <table id="MenuTabs" cellspacing="1%" align="center">
    <tr>
      <td>Home</td>
      <td>Lessons</td>
      <td>Playground</td>
      <td>About</td>
    </tr>
  </table>
</div>
<!-- Communication Tab-->
<div id="Messenger"></div>

＆＃13;

如您所见，它只显示菜单栏，但它不显示白色背景div。你可以帮帮我吗？

Answer 1

请参阅此fiddle。

第二个div没有出现的原因是因为你使用%作为<div>的高度。要使用%作为高度，您必须将%中的高度应用于其所有父级。因此，要使其发挥作用，您必须在body中指定html和%的高度。

因此，您还必须将以下给定的样式添加到CSS中：

html,
body {
  height: 100%;
}

分部不显示！为什么？

1 个答案:

请参阅此fiddle。