相对div高度

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

宽的作品，但在高比例的百分比将无法正常工作......

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

Answer 3

添加到您的css：

html, body{height: 100%} 

并改变max-heig的#block12到height

说明 HT：

基本上#wrap为100％的高度（相对值），但是当你使用相对措施，它会寻找其父元素的措施，这是通常不确定，因为它相对也。能够使用相对高度的唯一元素是body和或html，具体取决于浏览器，其余元素需要具有绝对高度的父元素。

但要小心，它的棘手与相对高度玩弄，你必须正确地计算你的头的高度，使您可以从其它元素的百分比它。减去。

Answer 4

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 5

基本上，问题在于在块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%; 

    } 

Answer 6

当你设置谁的父元素不具备的高度设置元素的百分比高度，父元素有其默认

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及更高版本。作为后备，你可以使用JavaScript。