如何在 Mac 上的 Safari 和 Chrome 中获得最小高度答案

【问题标题】：How to get min-height working in Safari, Chrome on MAC如何在 Mac 上的 Safari 和 Chrome 中获得最小高度
【发布时间】：2016-03-08 20:53:49
【问题描述】：

我有一个带有以下 CSS 的页面，它在 IE 和 FF 上呈现良好，但在 Safari 和 Chrome 的 Mac 上，最小高度似乎不起作用，并且当浏览器页面时所有内容相互折叠很短，而不是保持扩展并提供滚动条：

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

任何想法为什么 Safari（我猜是 WebKit）没有按照它的要求做？提前谢谢...

【问题讨论】：

在你的最小高度之后你有 100%。但是在 webkit 中我也发现了 min-height 。只是想我会指出来。

标签： macos safari css

【解决方案1】：

由于某种原因，我遇到了类似的问题，我在 Safari 上的导航栏与其他浏览器的高度不同。

为了修复它，我使用了min-height: initial

我还将它包装在一个特定于 safari 的媒体查询中，以避免可能的冲突：

is there a css hack for safari only NOT chrome?

【讨论】：

【解决方案2】：

以下示例适用于我在 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>

我无法从您的示例中看出您是如何实现样式的，因为您只显示样式定义。我注意到的另一件事是您正在定义 ID 样式（# 表示法）而不是类样式（点表示法）。虽然这也有效，但当您想将样式应用于多个元素时，您可以通过 recommended 定义类样式。

如果这个例子对你没有帮助，也许你可以粘贴一些 HTML 来显示你是如何使用你的样式的。

【讨论】：

这有帮助，谢谢！ @meteorainer 只是说这个问题也被窃听了，你应该真的是对问题的评论而不是答案：SO FAQ - on answers that are "thanks!" or "me too!" responses

【解决方案3】：

现在应该在 Safari 中支持 min-height，但您可能想尝试underscore hack：

最小高度：850px；高度：自动； _height: 850px;

【讨论】：