Css 固定定位Div扩展到HTML&；身体

我有一个响应网站，我正在工作，当你低于800px宽的菜单成为固定的顶部与切换下拉菜单

发生的事情是div扩展到HTML和Body区域之外，并使add成为一个横向滚动条。我不知道该怎么解决这个问题

任何帮助都将不胜感激

这是我的密码

HTML:

---

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

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

---

事实上，只有其中一个可能会解决你的问题，但我不确定。。可能是

body

对于像我这样寻找解决方案的人，给你：

造成此问题的原因是，如果主包含元素（body或html，具体取决于浏览器*）未设置为特定的宽度和高度，则其内容可能会超出窗口的边界，从而导致文档底部大于窗口

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

• 作为旁注，一些浏览器使用body元素滚动内容，而其他浏览器默认使用html元素滚动内容。为了获得一致的结果，需要将其重置到主体

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

html，正文{
位置：相对位置；
保证金：0；
边界：0；
填充：0；
宽度：100%；
身高：100%；
溢出：隐藏；
}
身体{
溢出：自动；
}

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

---

不管怎么说，这就是我所做的。希望它能帮助其他人。

我不知道你的答案是否真的解决了任何问题（希望它能解决），但把这些规则结合起来难道没有意义吗<代码>html，正文{…很抱歉，它没有解决问题。你能尝试将溢出：隐藏；规则放入包装器中，包装你的菜单吗？@user1576978这是我已经尝试过的，也没有用过的东西。因此，我很困惑，我想这与固定定位有关，但我以前从未遇到过这个问题。这是一个指向该网站的链接，你可以查看你自己看看。[link]你可能会因此恨我，但我只是溢出-x:hidden；在html中，是bodyrules@user1576978哈哈，真管用！我不知道我为什么不试试，我猜原来的溢出：隐藏不管用我想那也不行。谢谢你的时间，你帮了大忙！！

.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;
}

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