html - 使用流体布局时，div 元素将无法放入另一个元素中

Question

我一直在尝试创建网页布局，但遇到了这个问题。

<div id="pageWrapper">
  <div id="pageHeader">
  </div><!-- end of pageHeader -->

  <div id="navTab">
    <div class="navButtons"></div>
  </div><!-- end of navTab -->
</div><!-- end of wrapper -->

我的 CSS 看起来像

#pageWrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

#pageHeader {
  width:100%;
  height:7%;
  color:#DADADA;
  float:left; 
}

#navTab {
  width:100%;
  height:6%;
  background-color:#000000;
  float:left;
}

.navButtons{
  width:100px;
  height:90%;
  margin:5%;
  background-color:#ffffff;
  float:left;
}

.clearFloat {
  clear: both;
  margin: 0;
  padding: 0;
}

我正在尝试创建一个流畅的布局并尝试在 #navTab 中添加 .navButtons div 宽度为 margin-top 和 bottom 5%...但是当我在 CSS 中提供参数，它不适合放在 div 中。我在这里做错了什么？？？

我正在添加一个 jsbin 链接 http://jsbin.com/ezeqec/1/edit

Answer 1

嗯，尝试从 .navButtons 中删除 margin: 5%。如果你想要水平边距，让它成为 margin: 0 5%;

否则，如果您也想要垂直边距，只需执行以下操作:

<div id="navTab">
<div class="navButtons"></div>
<div class="clearFloat"></div> <!-- added this -->
</div><!-- end of navTab -->

CSS 更改:

.navButtons {
    width:100px;
    height:90px; /* in pixels instead of % */
    margin:5%;
    background-color:#ffffff;
}

#navTab {
        width:100px;
    height:90%; /* this should be in pixels, if you want to give % for navButtons */
    margin:5%;
    background-color:#ffffff;
}

如果要以 % 的形式给出 height，则父元素的高度应该是固定的。父元素的 height 不能为 % 或 auto。