Question

我试图找出我的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%;
}

我知道这是一个漫长的问题，但我只是在寻找解决问题的方向。谢谢！

Answer 1

尝试在overflow: hidden;类添加container，这应隐藏滚动。

应该是这样的：

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

希望它有所帮助！

整页底部的滚动条

1 个答案: