背景全屏 100vh 但如果屏幕垂直最小化则更大答案

【问题标题】：background full screen with 100vh but be bigger if screen is minimized vertically背景全屏 100vh 但如果屏幕垂直最小化则更大
【发布时间】：2020-04-23 07:45:06
【问题描述】：

我希望我的背景是 100vh 的全屏，但我也希望如果我垂直最小化屏幕，背景会停留在背景上图片的末尾

标题{背景：#efe0d9;显示：inline-block；宽度：100%；向左飘浮;高度：100vh；填充：1% 0 0；}

我想要一个在屏幕底部结束的背景，因为这样屏幕上的图片就足够大了，但是当我垂直最小化屏幕时，图片保持相同的大小（根据需要），但背景也上升，所以图片与网站的下一部分重叠enter image description here

【问题讨论】：

标签： html css background screen

【解决方案1】：

你试过设置min-height吗？

编辑：这可能不是您想要的，因为我必须添加一个额外的元素，但您可以尝试将 <header> 包装在高度设置为的容器中100vh，使标题的内容占据您要覆盖的最小高度，并为包装器和标题提供相同的背景颜色。

检查 sn-p 并切换到全屏以查看背景扩展超出标题的内容。

#container {
background: #efe0d9;
height: 100vh;
}
header {
  background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
  text-align: center;
}
body, p, hr {
  margin: 0;
}

<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>

编辑： 添加一个高度设置为100vh 并显示设置为flex 的容器div，并为标题提供min-height 似乎已经成功了。 Here's an updated fiddle.

【讨论】：

@RedSecret 我编辑了我的答案。让我知道这是否适合您。
它有点适用于 0px 100px 等。但现在我不知道如何将其应用于我的情况
我可以联系您并与您分享代码吗？
@RedSecret 将您的代码复制到 jsfiddle 并发布链接。
图片和视频无法添加，看起来有点奇怪