如果溢出设置为在 html 和正文中隐藏/滚动，则粘性导航栏不起作用，否则，html/body 不会填满屏幕

Question

我正在用nextJs框架构建一个网站，我遇到了以下问题：我的导航栏被设置为粘性的，因为我有一个盖子，我想在用户滚动时隐藏它。但是我的html/body表现得很奇怪，当overflow-x没有设置为隐藏时，它并没有填满整个屏幕：

正如你所看到的，屏幕右侧有一个空白，导致封面和页面中的图像没有100%的宽度。。。(这是当html和body的overflow-x设置为unset/visible/revere/initial时，导航栏会像这样粘在一起(

图像示例。。。

另一方面，当我将html和body的overflow-x设置为隐藏、自动、滚动或覆盖时，body会填充整个屏幕，但导航条在滚动时不再粘在页面上。

我很感激对这个问题的一些解释，因为CSS有时对我来说太难了，我修复了一些东西，但我真的不明白为什么它们被修复了。例如，我不明白为什么有时身体右侧有空白，有时却没有，是什么导致了这种情况？此外，粘性条非常有用，但太bug了，我应该用javascript让它粘起来，还是用css？

感谢您的关注。

一些css代码，它可能显示我做错了什么：

在标题中：

.cover {
background-color: black;
position: relative;
margin: auto;
width: 100%;
height: 120px;
}
.menu {
display: inline-flex;
flex-flow: row nowrap;
justify-content: space-evenly;
width: 100%;

position: sticky;
top: 0;
z-index: 1;

color: white;
background-color: black;

padding: 10px;
font-size: 1.5rem;
}

主要：

.grid { //Is also the container
display: grid;
grid-template-columns: 2fr 2fr;
margin: auto;
max-width: 1200px;
}
.grid-image {
position: relative;
height: 400px;
padding: 5px;
}
.grid-image img {
object-fit: cover;
}
.grid-text {
padding: 2em;
font-size: 1.3rem;
letter-spacing: 0.15rem;
color: white;
}
.grid-title {
color: var(--primary-red);
font-size: 3rem;

letter-spacing: 0.15rem;
text-transform: uppercase;
text-align: left;
}

@media only screen and (max-width: 1200px){
.grid {
grid-template-columns: 1fr;
max-width: 800px;
}
.grid, .grid-title {
text-align: center;
} 
.grid-item-3 { order: 1 }
}
@media only screen and (max-width: 600px){
.rescue-button {
display: inline-flex;
flex-wrap: nowrap;
justify-content: center;
position: fixed;
width: 80%;
bottom: 50px;
left: 0;
right: 0;
margin: auto;
padding: .5em .8em;
color: white;
background-color: green;
border-radius: 10px;
opacity: 90%;
animation: fade-in 3s;
}
.rescue-button-whatsapp-icon {
position: absolute;
bottom: .4em;
left: 20px;
width: 2rem;
}
}
@keyframes fade-in {
0% {
opacity: 0%;
}
100% {
opacity: 95%;
}
}

Answer 1

在这种情况下，有一些最佳实践可以帮助您。

将文档设置为占据整个屏幕，而不考虑内容。并确保图像永远不会溢出页面。

html {
height: 100%;
}
body {
min-height: 100%;
}
img {
max-width: 100%;
}

为了解释方框大小，将其设置在导航栏等元素上会使该元素成为边界框

在html和body上设置它没有任何效果，因为它们不应该超过屏幕的边界。

目前的最佳做法是这样设置盒子大小：

html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}