Question

我目前正在开发一个网站。我想要一个具有以下属性的背景div：

#background {
    background-image: url("../images/background.png");
    width: 100%;
    height: 100%;
    background-position: center;
    z-index: 1;
}

我的div基本上是<div id="background"></div>。

但是在我的网站上，背景div显示为0高度。有没有办法解决它？

Answer 1

Demo

CSS

body, html {
    height: 100% /* give height to your body and html */
}

Answer 2

将此添加到您的风格中：

position: absolute;

但请注意，它仍然取决于HTML和CSS的其余部分。根据它，您可能更喜欢

position: fixed;

Reference

Answer 3

<强>您好即可。检查此代码
HTML代码：

<html>
<body>
   <div id="back"></div> 
</body>
<html>

css代码：

html,body{
    width:100%;
    height:100%;
}
#back{
    background:black;
    height:100% important;
    min-height:100%;
    width:100%;
}

您可以在jsFiddle

上看到测试代码

Answer 4

宽度和高度的100％是相对于其父容器的。如果#background的父亲是身体，你必须确保身体也有100％，而这又取决于它的父html也有一个大小。

这是默认行为。如果您希望元素走出这个世界，您可以使用：

position: absolute;

或

position: fixed;

猜测您正在尝试将背景div用作整页背景，这是我使用的解决方案：

html, body {
  margin: 0;
  padding: 0;
}

#background {
  position: fixed;
  height: 100%;
  width: 100%;
  // Add your styles here
}

Answer 5

以百分比形式使用高度/宽度时，请确保您有一个容器。所以你可以：

1）设置一个具有设定高度的容器 - 这将使#background具有容器的整个高度。

<div id="container">
    <div id="background"></div>
</div>

使用CSS：

#container{
    height:250px;
}
#background{
    height: 100%;
}

jsfiddle

2）在#background元素中写入内容。如果你有一个height:100%的空div，它的高度为0px。

<div id="background">
    text
</div>

CSS - 高度为div的零但已设置高度

5 个答案: