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

Question

我有一个响应式网站，正在尝试设置背景图片，以便高度始终为 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%（不能更短）。因此，如果浏览器变短，图像会按比例缩小，以确保始终显示图像的全高。所以我猜图像大小是由浏览器的高度决定的。

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

Answer 2

尝试使用：background-size: cover;

Answer 3

您可以使用 vh 尺寸元素。它代表 viewport height，大多数现代浏览器都支持它。将它应用于您的 .main-container 元素，以便它始终具有浏览器的完整高度和宽度 window.

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

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

Responsive Website - Height Always 100%

html

css

responsive-design

magento-1.9