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

尝试将这些添加到您的.css

中

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

实际上只有其中一个可能会解决你的问题，但我不确定...概率body

Answer 2

对于那些寻找像我一样的解决方案的人来说，你走了：

这个问题是由于如果主要包含元素（主体或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应该可以在将来解决问题。

无论如何，这对我来说是这样的。希望它可以帮助别人。

固定定位Div正在扩展到HTML＆amp;身体

2 个答案: