2

我正在开发一个响应式网站，当您的宽度低于 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;
}
4

2 回答 2

5

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

此问题是由于以下事实引起的：如果主要包含元素（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 应该可以解决将来的问题。

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

于 2017-03-14T23:15:22.647 回答
3

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

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

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

于 2013-02-25T18:26:32.373 回答