相对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;
}

<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 parent他的视口..因此，通过将它们都设置为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。

Answer 3

将此添加到您的CSS：

html, body{height: 100%}

并将#block12的最大高度#block12为height

说明 ：

基本上#wrap是100％高度（相对度量），但是当你使用相对度量时，它会查找其父元素的度量，并且它通常是未定义的，因为它也是相对的。 能够使用相对高度的唯一元素是body和/或html本身，具体取决于浏览器，其余元素需要具有绝对高度的父元素。

但是要小心，用相对高度来玩它是很棘手的，你必须正确计算你的标题的高度，这样你就可以从其他元素的百分比中减去它。

Answer 4

宽度百分比有效，但高度百分比不起作用，除非您为依赖循环中的任何父级指定特定高度...

看到这个： 高度百分比不起作用？

Answer 5

div取其父级的高度，但由于它没有内容（expecpt为你的div），它只会与其内容一样高。

你需要设置body和html的高度：

HTML：

<div class="block12">
    <div class="block1">1</div>
    <div class="block2">2</div>
</div>
<div class="block3">3</div>

CSS：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.block12 {
    width: 100%;
    height: 50%;
    background: yellow;
    overflow: auto;
}
.block1, .block2 {
    width: 50%;
    height: 100%;
    display: inline-block;
    margin-right: -4px;
    background: lightgreen;
}
.block2 { background: lightgray }
.block3 {
    width: 100%;
    height: 50%;
    background: lightblue;
}

还有一个JSFiddle

Answer 6

基本上，问题在于块12。 要使block1 / 2占据block12的总高度，它必须具有定义的高度。 这个堆栈溢出帖子解释了非常好的细节。

因此，为block12设置定义的高度将允许您设置适当的高度。 我已经在JSfiddle上创建了一个示例，如果block12 div在整个页面中设置为标准高度，它将向您显示可以相互浮动的块。

这是一个示例，包括标题和block3 div，其中包含一些内容。

#header{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:20%;
    }

    #block12{
    position:absolute;
    top:20%;
    width:100%;
    left:0;
    height:40%;
    }
    #block1,#block2{
    float:left;
    overflow-y: scroll;
    text-align:center;
    color:red;
    width:50%;
    height:100%;

    }
 #clear{clear:both;}
 #block3{
    position:absolute;
    bottom:0;
    color:blue;
    height:40%;

    }