Question

当我在body标签设置为100％高度时使用背景图像时，我不知道为什么这个css正在工作但是当我在div上使用它时它没有显示全高（仅显示屏幕高度）< / p>

以下是代码：

<body>
   <div id="bg">
   </div>
</body>

CSS

body{
position:relative;
padding: 0;
overflow-x: hidden;
font-family: "Titillium Web";
color:#fff;
width: 100%;
}

#bg{
height:100%;
background-color: #030000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}

我不想使用背景尺寸：请覆盖

Answer 1

设置正文和html高度：100％

body,html{
    height: 100%;
     margin:0;
}

body{
position:relative;
padding: 0;
font-family: "Titillium Web";
color:#fff;
width: 100%;
}

#bg{
height:100%;
background-color: #030000;
background-image: url(img/bg.jpg);
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
}

<强> DEMO HERE

如果您想要全身，请执行以下操作：

body,html{
    height: 100%;
    margin:0;
}

body{
    position:relative;
    padding: 0;
    font-family: "Titillium Web";
    color:#fff;
    width: 100%;
    background-color: #030000;
    background-image: url(http://www.abelabad.com/abad/img/bg.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-attachment: fixed
}

#bg{
    height:100%;
}

<强> DEMO HERE

Answer 2

谢谢

我终于使用了jQuery

$('#bg').css("height", $(document).height());

Div css背景图像未显示100％高度

2 个答案: