固定定位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之外

回答

相關問題