使 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% 的 viewport height with the height: 100vh, then just stretch the .welcome div 和 height: 100%:

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>

使 div 背景与主体高度相同

Making div background same height as body

html

css

height

background