相对div高度

Question

我想将视图分为四个部分.顶部的标题,使用整页宽度和固定高度.剩下的页面被分成两个相同高度的块,它们的上面包含两个相同大小的块,彼此相邻.

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

#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;
}

而CSS:

<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 CSS:

html, body
{
    height: 100%;
}

工作小提琴

当你说wrap是100%,100%的是什么？它的父母(身体),所以他的父母必须有一些高度.

同样的body,他的父母是他的html.html父他的视口..所以,通过将它们都设置为100%,wrap也可以有一个百分比高度.

另外:元素有一些默认的填充/边距,这使它们跨越你应用于它们的高度.(导致滚动条)你可以使用

*
{
    padding: 0;
    margin: 0;
}

禁用它.

看那个小提琴

Answer 2

如果在父元素未设置高度的元素上设置百分比高度,则父元素具有默认值

height: auto;

您要求浏览器根据未定义的值计算高度.由于这将等于空值,结果是浏览器不对子元素的高度做任何事情.

除了使用JavaScript解决方案,您还可以使用这种致命的简单表方法:

#parent3 {
    display: table;
    width: 100%;
}

#parent3 .between {
    display: table-row;
}

#parent3 .child {
    display: table-cell;
}

在http://jsbin.com/IkEqAfi/1上预览

• 示例1:不起作用
• 示例2:修复高度
• 实施例3:表方法

但是:请记住,表方法只适用于所有现代浏览器和Internet Explorer 8及更高版本.作为Fallback,您可以使用JavaScript.