CSS 最大高度元素内的 Safari 高度 100% 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19119910/
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
Safari height 100% element inside a max-height element
提问by Chad
I'm trying to figure out why Safari won't read the max-height attribute of its parent as the height. Both Chrome and Firefox will read it correctly, but Safari seems to ignore the parent's max-height and instead grabs the page's full height.
我试图弄清楚为什么 Safari 不会将其父级的 max-height 属性读取为高度。Chrome 和 Firefox 都会正确读取它，但 Safari 似乎忽略了父级的最大高度，而是抓取页面的全高。
You can see it here
你可以在这里看到
CSS:
CSS：
body, html {
height: 100%;
margin: 0;
}
div {
height: 100%;
max-height: 300px;
width: 100px;
}
div span {
background: #f0f;
display: block;
height: 100%;
}
Markup:
标记：
<div>
<span></span>
</div>
I'm using Safari 6.0.5 on OSX 10.8.5.
我在 OSX 10.8.5 上使用 Safari 6.0.5。
回答by insertusernamehere
This issue happens due to a reported bug in Webkit:
发生此问题是由于 Webkit 中报告的错误：
This seems to be fixed for Chrome by now, but not for Safari.
这似乎现在适用于 Chrome，但不适用于 Safari。
The only non-JavaScript workaround that worked for me, is using an absolute positioning on the parent element:
唯一对我有用的非 JavaScript 解决方法是在父元素上使用绝对定位：
div {
position: absolute;
}
Demo
演示
回答by Sergey Dubovik
Similar problem appears on Safari if parent element uses flexboxproperties - container won't take 100% of the height.
Another solution (besides position: absolute;) would be to use vh(viewport height) units:
如果父元素使用flexbox属性，Safari 上也会出现类似的问题- 容器不会占据 100% 的高度。另一种解决方案（除了position: absolute;）是使用vh（视口高度）单位：
div {
height: 100vh;
}
