固定定位的 Div 正在扩展到 HTML 和正文之外

Question

我正在开发一个响应式网站，当宽度低于800px时，菜单会固定在顶部，并带有切换下拉菜单。

现在的情况是div扩展到HTML和Body区域之外，并添加了一个横向滚动条。我不知道该怎么避开这个。

如有任何帮助，我们将不胜感激！

这是我的代码

HTML:

<div class="navMobile">
<div class="menuBox">
<div class="navMobileBtn"><img src="<?php echo get_template_directory_uri(); ?>/img/menuBtn.png" /></div>
<ul class="navMobileBox">
  <li><a class="location" href="#">Location</a></li>
  <li><a class="building" href="#">Building</a></li>
  <li><a class="space" href="#">Space</a></li>
  <li><a class="links" href="#">Links</a></li>
  <li><a class="contact" href="#">Contact</a></li>
</ul>
</div>
</div>

CSS：

.navMobile {display:block;}
.navMobile {
    height:auto;
}
.navMobile .menuBox {
    height:auto;
    min-height:40px;
    width:100%;
    display:inline-block;
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#fff;
    z-index:99999;
}
.navMobile .menuBox ul {
    display:block;
    clear:both;
    height:auto;
    width:100%;
    padding:0;
    margin:0;
    border-top:1px solid #eee;
    font-family: "proxima-nova";
}
.navMobile .menuBox ul>li {
    display:block;
    clear:both;
    padding:10px 0;
    text-align:center;
    border-bottom:1px solid #eee;
}
.navMobile .menuBox ul>li a {
    padding:0;
    margin:0;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:#ccc;
    font-size: 0.9em;
    font-weight:500;
    opacity: 1;
}
.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
    text-decoration: none;
}
.navMobile .menuBox ul>li:last-child a {
    margin-right: 0;
    padding-right: 0;
}
.navMobileBtn {
    clear:both; 
    height:40px;
    width:40px;
}

Answer 1

对于任何像我一样寻找解决方案的人来说，这里是：

这个问题的原因是，如果主包含元素，无论是body还是html，取决于浏览器*，没有设置为特定的宽度和高度，其内容可能会增长到窗口的边界之外，导致文档的底部大于窗口。

通常情况下，这会导致滚动条，这是预期的行为。但是，在固定元素的情况下，它还通过将右值和底值移动到主元素的位置而不是窗口的边缘来更改固定元素的起始位置。这使得固定元素可以在窗口中滚动，这与固定元素的行为方式正好相反。

• 顺便说一句，一些浏览器使用body元素来滚动内容，而另一些浏览器则默认使用html元素滚动内容。这需要重新设置到主体，以获得一致的结果

解决方案，将html和body元素的宽度和高度设置为100%，使其保持窗口的大小。您还需要为边距以及良好的度量填充和边界设置标准重置。最后，将溢出设置为适当的元素可以确保浏览器使用正确的元素滚动文档。

html, body {
  position: relative;
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  overflow: auto;
}

将其添加到重置css中应该可以解决将来的问题。

无论如何，这就是我的原因。希望它能帮助其他人。

Answer 2

尝试将这些添加到.css 中

html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
height: 100%;
position: relative;
}

当然，只要其中一个可能就能解决你的问题，但我不确定。。可能是body