固定排名Div扩展到HTML&身体 [英] Fixed Positioned Div is extending outside of HTML & Body

问题描述

我正在处理一个响应式网站，当您的宽度低于800像素时，菜单会固定在顶部，并带有一个下拉菜单.

I have a responsive site I'm working on and when you go below 800px wide the menu becomes fixed at the top with a toggle drop down menu.

正在发生的事情是div扩展到HTML和Body区域之外，并添加了一个横向滚动条.我不确定该如何解决.

What's happening is that the div is extending outside of the HTML and Body area and making add a sideways scrollbar. I'm not sure how to get around this.

任何帮助将不胜感激！

这是我的代码

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

推荐答案

尝试将它们添加到您的.css

try add these into your .css

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

也许只是其中之一可能会解决您的问题，但是我不确定..body

acctually just one of them would probably solve your problem, but i'm not sure wich.. probably body

这篇关于固定排名Div扩展到HTML&身体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！