Question

我正在开发我的第一个项目，有一天应该成为博客。我正在尝试设计主页，直到某一点，一切都很好。但后来发生了一些事情并且出现了溢出。我不知道是什么原因造成的。我正在使用box-sizing：border-box只是为了确保没有隐藏的边框或边距或填充导致这个问题，但它仍然存在。

顺便说一下，我的目标是使页面响应，这就是为什么我尽可能地使用可扩展的宽度和高度。也许这就是问题所在？

width: calc(100vw); max-width: 4000px;
height: calc(5vh); max-height: 112.5px;

有什么想法吗？

Answer 1

这里溢出的唯一原因是使用100vw。一旦设置了某个块标记的宽度，它就会溢出。与100vh类似。它使标签垂直溢出。

使用calc(100vw)也毫无意义，如果需要，您可以使用100%。

#header {
        width: 100%;
    max-width: inherit;
        height: calc(5vh); max-height: 112.5px;
    }

这是更新的jsfiddle。