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

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

• 附带说明，一些浏览器默认使用 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