以 '100vh - 100px' 作主题

当我们在编写网页时，我们经常会遇到需要设置全屏背景图的情况。在这种情况下，我们想让背景图完全填充浏览器窗口。如果我们设置背景图的高度为100vh，那这个背景图将与浏览器窗口高度相等。但是，如果我们想给这个背景图留些边距，该怎么办呢？

这就需要用到本主题的代码：'100vh - 100px'。这个式子可以确保我们的背景图与浏览器窗口保持合适的边距。下面我们来看看如何使用这个式子。

代码片段

使用示例：

background: url('/image.jpg') center center / cover no-repeat fixed;
height: calc(100vh - 100px);

在上面的代码片段中，我们首先设置了一个背景图，并让它居中，并覆盖整个屏幕，使它成为我们的全屏背景图。然后，我们使用了 calc() 函数来计算我们页面的高度，确保它减去了我们想要的边距（100px），以便我们的全屏背景图不会被遮盖。

总结

使用 '100vh - 100px'，我们可以轻松地为我们的全屏背景图设置一个合适的边距。这个代码片段将确保我们的背景图始终与浏览器窗口保持相同的边距，无论用户的设备大小如何。