使div背景与身体高度相同

Question

我一直试图解决这个问题，现在已经有2个小时了...尝试了多个指南，没有任何效果。

这是我的css：

body {
margin:0;
background:url('chalk.jpeg');
}

html, body {
  height: 100%;
}

.welcome{
    text-align: center;
    position:relative;
    height:100%;
    background:rgba(38, 36, 15, 0.7);
}

但是，出于某种原因，页面看起来像这样：https://i.imgur.com/iPvMTk1.jpg

我希望欢迎div背景位于正文背景图像的顶部，直到页面结束。试过很多解决方案，但没有什么可行。

Answer 1

您可以使用视口单元来执行此操作，其中body元素使用100%获取视口高度的height: 100vh，然后使用.welcome拉伸height: 100% div：

html, body {
  width: 100%;
  height: 100vh; /* 100% of the viewport height */
  margin: 0;
}

body {
  background: url('http://placehold.it/1600x900') no-repeat center center; /* modified */
  background-size: cover; /* recommended / also try the "contain" */
}

.welcome {
  text-align: center;
  position: relative;
  height: 100%;
  background: rgba(38, 36, 15, 0.7);
}

<div class="welcome">welcome div</div>