Html 相对div高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19089115/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative div height
提问by Explicat
I want to split up the view in four parts. A header at the top, using full page width and fixed height.
我想将视图分成四个部分。顶部的标题，使用整个页面宽度和固定高度。
The remaining page is split up in two blocks of the same height, the upper of them contains two same-sized blocks next to each other.
剩余的页面被分成两个相同高度的块，它们的上面包含两个彼此相邻的相同大小的块。
What I tried is (without the header):
我尝试的是（没有标题）：
#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>
Apparently, using a percentage value for the height won't work that way. Why is that so?
显然，使用高度的百分比值不会那样工作。为什么呢？
回答by avrahamcool
add this to you CSS:
将此添加到您的 CSS：
html, body
{
height: 100%;
}
when you say to wrapto be 100%, 100% of what? of its parent (body), so his parent has to have some height.
当你说wrap是100%，100%什么？它的父母（身体），所以他的父母必须有一定的高度。
and the same goes for body, his parent his html. htmlparent his the viewport..
so, by setting them both to 100%, wrapcan also have a percentage height.
和同样的body，他的父母他html。html父视口..所以，通过将它们都设置为 100%，wrap也可以有一个百分比高度。
also: the elements have some default padding/margin, that causes them to span a little more then the height you applied to them. (causing a scroll bar) you can use
另外：元素有一些默认的填充/边距，这会导致它们的跨度比您应用于它们的高度高一点。（导致滚动条）您可以使用
*
{
padding: 0;
margin: 0;
}
to disable that.
禁用它。
Look at That Fiddle
看看那个小提琴
回答by Sven
When you set a percentage height on an element who's parent elements don't have heights set, the parent elements have a default
当您在父元素没有设置高度的元素上设置百分比高度时，父元素有一个默认值
height: auto;
You are asking the browser to calculate a height from an undefined value. Since that would equal a null-value, the result is that the browser does nothing with the height of child elements.
您要求浏览器根据未定义的值计算高度。由于这将等于空值，结果是浏览器对子元素的高度不做任何处理。
Besides using a JavaScript solution you could use this deadly easy table method:
除了使用 JavaScript 解决方案之外，您还可以使用这种非常简单的表格方法：
#parent3 {
display: table;
width: 100%;
}
#parent3 .between {
display: table-row;
}
#parent3 .child {
display: table-cell;
}
Preview on http://jsbin.com/IkEqAfi/1
在http://jsbin.com/IkEqAfi/1 上预览
- Example 1: Not working
- Example 2: Fix height
- Example 3: Table method
- 示例 1：不工作
- 示例 2：固定高度
- 示例 3：表格方法
But:Bare in mind, that the table method only works properly in all modern Browsers and the Internet Explorer 8 and higher. As Fallback you could use JavaScript.
但是：请记住，表格方法只能在所有现代浏览器和 Internet Explorer 8 及更高版本中正常工作。作为后备，您可以使用 JavaScript。
回答by aleation
add this to your css:
将此添加到您的CSS：
html, body{height: 100%}
and change the max-height of #block12to height
并将最大高度更改#block12为height
Explanation:
说明：
Basically #wrapwas 100% height (relative measure) but when you use relative measures it looks for its parent element's measure, and it's normally undefined because it's also relative. The only element(s) being able to use a relative heights are bodyand or htmlthemselves depending on the browser, the rest of the elements need a parent element with absolute height.
基本上#wrap是 100% 高度（相对度量），但是当您使用相对度量时，它会查找其父元素的度量，并且通常未定义，因为它也是相对的。唯一能够使用相对高度的元素是body和/或html它们本身取决于浏览器，其余元素需要具有绝对高度的父元素。
But be careful, it's tricky playing around with relative heights, you have to calculate properly your header's height so you can substract it from the other element's percentages.
但是要小心，使用相对高度很棘手，您必须正确计算标题的高度，以便您可以从其他元素的百分比中减去它。
回答by Sachin
Percentage in width works but percentage in height will not work unless you specify a specific height for any parent in the dependent loop...
宽度百分比有效，但高度百分比无效，除非您为依赖循环中的任何父项指定特定高度...
See this : percentage in height doesn't work?
看到这个： 身高百分比不起作用？
回答by LinkinTED
The div take the height of its parent, but since it has no content (expecpt for your divs) it will only be as height as its content.
div 采用其父级的高度，但由于它没有内容（除了您的 div），因此它的高度仅与其内容一样。
You need to set the height of the body and html:
你需要设置body和html的高度：
HTML:
HTML：
<div class="block12">
<div class="block1">1</div>
<div class="block2">2</div>
</div>
<div class="block3">3</div>
CSS:
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;
}
And a JSFiddle
还有一个JSFiddle
回答by ajfstuart
Basically, the problem lies in block12. for the block1/2 to take up the total height of the block12, it must have a defined height. This stack overflow postexplains that in really good detail.
基本上，问题在于block12。要使块 1/2 占据块 12 的总高度，它必须具有定义的高度。这个堆栈溢出帖子非常详细地解释了这一点。
So setting a defined height for block12 will allow you to set a proper height. I have created an example on JSfiddlethat will show you the the blocks can be floated next to one another if the block12 div is set to a standard height through out the page.
因此，为 block12 设置定义的高度将允许您设置适当的高度。我在 JSfiddle 上创建了一个示例，它将向您展示如果在整个页面中将 block12 div 设置为标准高度，则块可以彼此相邻浮动。
Here is an example including a header and block3 div with some content in for examples.
这是一个示例，包括标题和 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%;
}
