我试图弄清楚为什么我的 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%;
}
我知道这很长,但我只是在寻找解决问题的方向。谢谢!