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

Question

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

发生的事情是 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 取决于浏览器*)未设置为特定的宽度和高度，则其内容可能会超出窗口的边界，从而导致底部文档比窗口大。

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

• 作为旁注，一些浏览器使用 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 应该可以解决将来的问题。

无论如何，这就是为我做的。希望它能帮助别人。