固定定位Div扩展到HTML和Body之外

我有一个响应式网站，我正在使用，当你走到800px以下的宽度时，菜单变成固定在顶部，并带有一个切换下拉菜单。固定定位Div扩展到HTML和Body之外

发生什么事情是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; 
}

来源

2013-02-25 dennisterrey

尝试添加这些到您的.css

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

acctually只是其中之一会可能解决你的问题米，但我不知道至极..大概body

来源

2013-02-25 18:26:32 user1576978

我不知道你的答案实际上是否解决了任何问题（希望它可以），但是不会将这些规则合并起来？ 'html，body {...' – j08691 2013-02-25 18:28:25

@ user1576978感谢您的帮助，但没有工作:( – dennisterrey 2013-02-25 18:34:56

对不起，它没有解决它。你可以尝试把溢出：隐藏的规则在包装你的菜单包装？ – user1576978 2013-02-25 18:37:25

为寻找一个解决方案，好像我是，在这里你去：

此问题是由以下事实引起的，如果主要包含的元素，无论是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-14 23:15:22

固定定位Div扩展到HTML和Body之外

回答

相关问题