0

CSS がページ全体にスクロール バーを表示する理由を突き止めようとして、壁にぶつかりました。

これが私の古いdivレイアウトです（スクロールバーの問題はありません）：

Container 100% (width)
  wrapper 80%
    navMenu 100% 
    centerDoc 100%

最近、別のメニュー項目を追加する必要がありました (水平メニューなので、新しい項目が右側に追加されました)。新しいメニュー項目を追加した後、ページのサイズを変更すると (小さくする)、新しいメニュー項目が左下隅 (最初のメニュー項目の下) に折りたたまれることがわかりました。

これを修正するために、レイアウトを次のように変更しました。

 Container 100% (width)
   navMenu 100%      <-- moved navMenu out of wrapper
   wrapper 80%
     centerDoc 100%

これにより、折りたたみの問題が修正されました。しかし今では、ページ全体のページの下部にスクロール バーがあります。そして、私はそれを取り除く方法を理解できないようです:/

HTML スニペット:

<div id="conainer">
    <?php require_once 'includes/header.php';
          require_once 'includes/nav.php'; ?>

     <div id="wrapper">

     <p>this is the wrapper</p>

        <div id="centerDoc">
        <p>this is the centerDoc</p>    

    </div>  <!--centerDoc !-->
     </div> <!-- wrapper !-->           
       </div> <!--container !-->

注: nav.php には navMenu div が含まれています

CSS スニペット:

#container {
   margin:auto;
   width: 100%;  
}


 #wrapper{

    width:80%;
}

#navMenu{

    /*font-family: 'Tenor sans', Calibri, Times, Times, serif;*/
    margin-left:2px;
    width:100%;
    font-weight:normal;
    font-size:15px;

    /*this keeps the drop down menu on top*/
    position:relative;
    z-index:50;
}


#centerDoc {

   margin-top:2.8%;
   margin-left:10px;
   float:left;
   width: 100%;
}

私はこれが長いものであることを知っていますが、問題を解決するための方向性を探しています. ありがとう！

4

1 に答える 1

0

クラスで追加overflow: hidden;してみてくださいcontainer。スクロールが非表示になります。

次のようになります。

#container {
   margin:auto;
   width: 100%;  
   overflow: hidden;
}

それが役に立てば幸い！

于 2012-08-10T04:19:41.353 に答える