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

Question

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

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

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

Answer 1

你试过设置min-height吗？

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

检查代码段并切换到全屏以查看背景扩展到 header 的内容之外。

#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>

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

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

background full screen with 100vh but be bigger if screen is minimized vertically

html

css

background

screen