Question

这是我尝试过的CSS;

的CSS：

.main
{
    width: 65%;
    background:url("../slice/body-bg.jpg");    
    display:block;
    float: left;
    margin-left: 0px;  
    min-height:100% !important;
    height:auto;     
    padding: 0px 12px;
}

以下是示例输出屏幕截图：http://s18.postimg.org/q5zi9g7mh/untitled.jpg

我在html {height:100%;}和

中使用过

.main {min-height:100%; height:auto;}

但它仍然不适合我。

有人可以帮我解决这个问题吗？

任何帮助都将受到高度赞赏。

感谢。

Answer 1

只需使用：

html,
body{
    height:100%;
}

.main{
    height:100%;
}

添加高度：自动;高度：100％;超过它。

Answer 2

参见示例：fiddle

HTML

<div class="main">123</div>

CSS

html, body{width:100%; height:100%;}

Answer 3

添加background-size:cover

.main
    {

        background:url("../slice/body-bg.jpg") no-repeat center center fixed;;  
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;  

    }

Answer 4

由于CSS3中的background-size属性，我们可以完全通过CSS完成。我们将使用HTML元素（比身体更好，因为它总是，至少是浏览器窗口的高度）。我们在其上设置了固定且居中的背景，然后使用设置为封面关键字的背景大小调整其大小。

试试这个：

html { 
  background: url("../slice/body-bg.jpg") no-repeat center center fixed; 
  background-size: cover;
}

css主要背景图像与全高

4 个答案: