html - 相对div高度

Question

我想将 View 分成四个部分。顶部的页眉，使用全页宽度和固定高度。

剩下的页面被分成两个相同高度的 block ，它们的上部包含两个彼此相邻的相同大小的 block 。

我试过的是(没有标题):

#wrap {
  width: 100%;
  height: 100%;
}

#block12 {
  width: 100%;
  max-height: 49%;
}

#block1,
#block2 {
  width: 50%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}

#block3 {
  width: 100%;
  height: 49%;
  overflow: auto;
  /*background: blue;*/
}

.clear {
  clear: both;
}

<div id="wrap">
  <div id="block12">
    <div id="block1"></div>
    <div id="block2"></div>
    <div class="clear"></div>
  </div>
  <div id="block3"></div>
</div>

显然，使用高度的百分比值不会那样工作。为什么会这样？

Answer 1

将此添加到您的 CSS:

html, body
{
    height: 100%;
}

working Fiddle

当您说 wrap 是 100% 时，100% 是什么？它的 parent ( body )，所以他的 parent 必须有一定的高度。

body 也是如此，他的父级是他的 html。 html 父级他的视口(viewport).. 因此，通过将它们都设置为 100%，wrap 也可以具有百分比高度。

还有: 这些元素有一些默认的填充/边距，这会导致它们的跨度比您应用到它们的高度多一点。 (导致滚动条) 你可以使用

*
{
    padding: 0;
    margin: 0;
}

禁用它。

看That Fiddle