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 回答