Question

我在制作网站时，我没有为div部分设置高度并用内容填充它。然后我将背景图像设置为图像，并且image / div伸展以包装内容，因为没有高度。我一直试图复制它，但每次我做同样的事情，背景图像消失但内容仍然存在（白色文本，除非选择，否则无法看到）。当我设置它时会发生这种情况：

#main{
    background-image: url("images/pizza-dark.jpg");
    background-repeat: no-repeat; 
    background-size: cover;
    background-attachment: fixed;
    clear: both;
}

我知道有办法做到这一点，但我不太确定。这对网站至关重要，因为我使用的是自举列，并且设置的高度不会在移动设备上产生良好的效果。在下面的JSFiddle中，没有设置高度，如您所见，背景图像根本没有显示。即使你把它设置为100％，折叠下来的内容（来自Bootstrap的颜色）也不会显示，因为背景图像没有伸展到那么远......我已经尝试过高度：自动也是如此，这也不起作用。

这是一个JS小提琴： https://jsfiddle.net/du53n862/

谢谢！

Answer 1

您忘记将float属性添加到主容器中。您可以将vh单位用于主容器height，它将适合每个屏幕尺寸：

#main {
background-image: url("http://itspizzatime.ca/wp-    content/uploads/2015/09/4791207-9790062099-Pizza1.jpg");
background-repeat: no-repeat; 
background-size: cover;
float: left;
width: 100%;
height: 100vh;
}

这是一个小提琴：fiddle link

Answer 2

我不确定这是否是您想要的行为，但如果您向主div添加100％的高度和滚动溢出，则图像将只是背景中固定的全封面图像。这似乎在this fiddle中正常工作。

#main {
  height: 100%;
  overflow: scroll;
  ...
}

Answer 3

使用flexbox可以轻松解决此问题。如果你可以放弃对旧版浏览器的支持，那就是简单的解决方案https://jsfiddle.net/1p1k41ot/。

我刚在#main

中添加了几行

#main {
...
display: flex;
flex: 1 1;
height: 100%;
}

如何使div的高度和背景图像拉伸以包围div中的所有内容？

3 个答案: