CSS-如何改变浏览器高度，使网站不受影响？

例如，当您在堆栈溢出时更改浏览器的高度时，页面上的内容不会更改。但是，如果您访问我的公文包：并更改浏览器高度，某些元素会被挤压。似乎无法理解发生了什么。

您正在使用

vh

（视口高度）单元计算页面上各种元素的布局

100vh

相当于任何给定时刻浏览器窗口的高度，因此调整浏览器大小正是它编码的目的

我在检查您的站点时看到的示例元素：

.full-hero {
    background-color: #c7dbfc;
    background-size: cover;
    box-sizing: border-box;
    height: 90vh;
    padding-top: 10vh;
}

---

现在的情况是，您已将内容设置为：

.header-logo {
    background-color: rgba(229,229,229,0.4);
    box-sizing: border-box;
    display: block;
    height: 10vh;
    padding-top: 10px;
    position: relative;
    text-align: center;
    width: 10vh;
}

您的高度和宽度设置为

height:10vh分别<编码>宽度：10vh

什么是vh的缩写？它是视口高度的缩写，
vh
是一个测量单位，但与px不同，它不是绝对的

无论您如何调整窗口大小，高度或宽度
10px
的对象始终是高度或宽度
10px
，因为我们讨论的是屏幕上的静态物理像素

另一方面，
vh
、
vw
或
%
是相对测量单位。以
%
为例。如果创建div，则宽度为100%——它将拉伸整个父元素的长度。如果父元素是100px宽，那么子元素将是100px的100%，这是。。。。100像素宽。如果将其设置为100px的50%，则其宽度为50px

那么，如果将元素设置为
100vw
，会发生什么情况呢？它可以最简单地描述为整个浏览器宽度的100%——或“视口”

因此
100vh
的部分将是视图高度的100%。（视口高度）

而您的图像是
10vh
，这意味着它将始终是浏览器窗口高度的10%。因此，如果将浏览器的大小调整为正好500px高，您的图像将为50px高

您需要做的是设置图像的大小（以像素为单位），使其始终保持其高度和宽度

我建议您设置一个由几个div组成的小操场，并开始使用不同的测量类型。

制作一些使用
width:100px的div高度：200px宽度：100%高度：100%宽度：100vw高度：100vh
并将div相互放置，然后查看发生了什么

希望这有帮助。
谢谢！修复了我的网站使用像素代替vh和vw。谢谢你的帮助！很高兴这有帮助。如果您认为这是我们问题的正确答案，请确保将答案标记为正确。