响应式网站 - 高度始终为 100%答案

【问题标题】：Responsive Website - Height Always 100%响应式网站 - 高度始终为 100%
【发布时间】：2015-06-02 01:15:26
【问题描述】：

我有一个响应式网站，我正在尝试设置背景图片，以使高度始终为 100%。宽度并不重要，但在图片底部总是需要显示的元素。虽然我的编码不太正确：

CSS：

body.cms-home .main-container {
    margin-top: 20px;
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    height: 100%;
    background-position: center;
    width: auto;

HTML：

 <div class="main-container">
            </div>

我的网站是通过 Magneto 制作的，但我认为这与 CSS 没有什么不同。

我错过了什么？

更新：只是为了确认似乎每个人都感到困惑。我希望我的背景图像始终为 100%（不短）。因此，如果浏览器变短，图像会按比例缩小以确保始终显示图像的整个高度。所以我猜图像大小是由浏览器的高度决定的。

【问题讨论】：

设置background-size:cover;background-position:fixed 使其保持原位。 This CSSTricks article 彻底覆盖。
封面不会使底部元素始终显示
如果您希望图像被压扁并始终遵守浏览器窗口的宽度和高度，请查看我的答案和演示。

标签： html css responsive-design magento-1.9

【解决方案1】：

body.cms-home .main-container {
    margin-top: 20px;
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

【讨论】：

谢谢，我可以看到图像的底部。但我希望高度填充可用空间（即它下面没有空白）
把网站给我看看

【解决方案2】：

尝试使用：background-size: cover;

【讨论】：

谢谢，我可以看到图像的底部。但我希望高度填充可用空间（即它下面没有空白）
如果您将背景应用到<html> 标记为background-size: cover; 而不是body，会发生什么情况？这可能会修复浏览器所做的任何边距。
你的意思是删除'body.cms-home'，让它只是'.main-container'，如果是这样，很遗憾没有任何区别

【解决方案3】：

您可以使用vh 调整大小元素。它代表viewport height，大多数现代浏览器都支持它。将其应用于您的 .main-container 元素，以便始终为其提供浏览器窗口的完整高度和宽度。

body.cms-home .main-container {
    background-image: url("../images/landing.jpg");
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center;
}

请注意，如果您的页面可滚动，您可能还想给它一个position: fixed。

Working Demo

【讨论】：

嗨 Fizzix。我不希望图像被挤压，比例应该保持不变。这可能吗？
然后将 background-size: 100% 100%; 更改为 background-size: cover;。 Demo Here
谢谢。这适用于您的演示，但由于某种原因它不适用于我。现在想弄清楚为什么。其他一些编码必须与之冲突。我的现在还在裁剪。
你可能想在你的问题中包含更多代码。
一旦我能弄清楚与它有什么联系，我会的。