是什么导致我的页面溢出？
What causes overflow on my page?
我正在做我的第一个项目，它应该有一天会成为一个博客。我目前正在尝试设计主页，直到某个时候，一切都还不错。但是后来发生了一些事情，出现了溢出。我不知道是什么原因造成的。我正在使用 box-sizing: border-box 只是为了确保没有隐藏的边框或边距或填充导致此问题，但它仍然存在。
顺便说一下，我的目标是使页面具有响应性，这就是我尝试尽可能多地使用可缩放宽度和高度的原因。也许这就是问题所在？
width: calc(100vw); max-width: 4000px;
height: calc(5vh); max-height: 112.5px;
这是 fiddle：https://jsfiddle.net/u7vqz0cq/
有什么想法吗？
此处溢出的唯一原因是使用了 100vw。一旦你设置了一些块标签的宽度，它就会溢出。 100vh 的情况类似。它使标记垂直溢出。
并且使用calc(100vw)也是没有意义的，如果需要的话你可以使用100%。
#header {
width: 100%;
max-width: inherit;
height: calc(5vh); max-height: 112.5px;
}
这是更新后的 jsfiddle。
我正在做我的第一个项目，它应该有一天会成为一个博客。我目前正在尝试设计主页，直到某个时候，一切都还不错。但是后来发生了一些事情，出现了溢出。我不知道是什么原因造成的。我正在使用 box-sizing: border-box 只是为了确保没有隐藏的边框或边距或填充导致此问题，但它仍然存在。
顺便说一下，我的目标是使页面具有响应性，这就是我尝试尽可能多地使用可缩放宽度和高度的原因。也许这就是问题所在？
width: calc(100vw); max-width: 4000px;
height: calc(5vh); max-height: 112.5px;
这是 fiddle：https://jsfiddle.net/u7vqz0cq/
有什么想法吗？
此处溢出的唯一原因是使用了 100vw。一旦你设置了一些块标签的宽度，它就会溢出。 100vh 的情况类似。它使标记垂直溢出。
并且使用calc(100vw)也是没有意义的，如果需要的话你可以使用100%。
#header {
width: 100%;
max-width: inherit;
height: calc(5vh); max-height: 112.5px;
}
这是更新后的 jsfiddle。