CSS 如何在 Mac 上的 Safari、Chrome 中获得最小高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3542110/
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
How to get min-height working in Safari, Chrome on MAC
提问by dsire
I have a page with the following CSS, it renders fine on IE and FF, but on Mac in Safari and Chrome the min-height does not seem to work and all the content collapses on top of each other when the browser page is short instead of staying extended and providing scrollbars:
我有一个带有以下 CSS 的页面，它在 IE 和 FF 上呈现良好，但在 Safari 和 Chrome 中的 Mac 上，min-height 似乎不起作用，并且当浏览器页面很短时，所有内容都折叠在一起保持扩展并提供滚动条：
<style type="text/css">
html, body {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
background: #000000;
font: 86% Arial, "Helvetica Neue", sans-serif;
margin: 0;
padding: 0px;
color: #CCCCCC;
}
#website_wrapper {
min-height: 850px;
min-width: 1080px;
height: 100%;
width: 100%;
}
#website {
height: 100%;
width: 100%;
background-color: #000000;
vertical-align: bottom;
}
Any ideas why Safari (WebKit I guess) is not doing what it is told to do? Thanks in advance...
有什么想法为什么 Safari（我猜是 WebKit）没有按照它的要求去做？提前致谢...
回答by endymion1818
For some reason I'm encountering as similar issue, where my navbar on Safari is a different height to other browsers.
出于某种原因，我遇到了类似的问题，我在 Safari 上的导航栏与其他浏览器的高度不同。
To fix it I have used min-height: initial
为了修复它，我用过 min-height: initial
I also wrapped this in a safari-specific media query, to avoid possible conflicts:
我还将其包装在特定于 safari 的媒体查询中，以避免可能的冲突：
回答by Ryan H.
The following example works for me on Mac OS X 10.6.4 using Safari 5.0.1 (not sure which version of Webkit):
以下示例在 Mac OS X 10.6.4 上使用 Safari 5.0.1（不确定哪个版本的 Webkit）适用于我：
<html>
<head>
<!--
<style>
.box1 {
float: left;
width: 100px;
margin: 1em 20px 1em 0;
background: yellow;
border: 1px solid black;
min-height: 100px;
}
-->
</style>
</head>
<body>
<div class="box1"></div>
<div class="box1">less text</div>
<div class="box1">more text more text more text more text more text more text</div>
</body>
</html>
I can't tell from your example how you are implementing your styles as you only show your style definitions. Another thing I've noticed is that you are defining ID styles (# notation) instead of class styles (dot notation). Though that also works, it's recommendedthat you define class styles when you want to apply a style to multiple elements.
我无法从您的示例中看出您是如何实现样式的，因为您只显示了样式定义。我注意到的另一件事是您正在定义 ID 样式（# 符号）而不是类样式（点符号）。虽然这也有效，但建议您在要将样式应用于多个元素时定义类样式。
If this example doesn't help you, perhaps you can paste some HTML that shows HOW you are using your styles.
如果这个例子对你没有帮助，也许你可以粘贴一些 HTML 来展示你如何使用你的样式。
回答by Ryan H.
min-height is supposed to be supported in Safari now but you might want to try the underscore hack:
现在 Safari 应该支持 min-height，但您可能想尝试下划线 hack：
min-height: 850px; height: auto; _height: 850px;
最小高度：850px；高度：自动；_高度：850px；
