Question

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

我尝试的是（没有标题）：

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

CSS：

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

显然，使用高度的百分比值将无法正常工作。为什么会这样？

Answer 1

将此添加到CSS：

html, body
{
    height: 100%;
}

working Fiddle

当您对wrap说100%时，100％是什么？它的父母（身体），所以他的父母必须有一些高度。

同样适用于body，他的父母是html。 html将他的视口设为父因此，通过将它们都设置为100％，wrap也可以具有百分比高度。

也：元素有一些默认的填充/边距，这使它们跨越你应用于它们的高度。（导致滚动条）你可以用

*
{
    padding: 0;
    margin: 0;
}

禁用它。

查看That Fiddle

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的最大高度更改为height

<强>解释：

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

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

Answer 4

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

看到这个： percentage in height doesn’t work?

Answer 5

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

您需要设置正文的高度和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的总高度，它必须具有定义的高度。 This stack overflow post非常详细地解释了这一点。

因此，为block12设置定义的高度将允许您设置适当的高度。我创建了an example on 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%;

    }

相对div高度

6 个答案: