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

実際には、そのうちの1つだけで問題が解決する可能性がありますが、どちらかはわかりません。body

于 2013-02-25T18:26:32.373 に答える