Question

我有以下css和html，它导致firefox（没有检查其他浏览器）显示两个滚动条（2右和2底）但它们似乎被禁用，因为即使最小化页面它不滚动

    * {
    font-family:'Helvetica Neue','Helvetica','Arial';
    font-size:12px;
    color:#333;
}

html, body {
    background:#e0e0e0;
    height:100%;
    background-image: url('/images_/backgrounds/background.jpg');
    background-repeat: repeat-x;    
    margin:0;
    overflow: scroll;
}

/***************** main wrapper and content ********************/

#wrapper {
    text-align: left;
    margin: 0px auto;
    /*padding: 0px 12px 0px 12px;*/
    border:0;
    width: 960px;
    height: 100%;
    background-image: url('/images_/backgrounds/content_shadow.png');
    background-repeat: repeat-y;
}

#content { 
    float: left;
    width: 100%;
    padding:85px 16px 10px 18px;
}

#topbar {
    width:100%;
    height:42px;
    margin:0;
    padding:0;
    background: #0066cc;
    /* make top bar stick to the top of browser */
    position:fixed;
    z-index:800;
    /*Making sure it sticks to left of window in IE7*/
    top:0;
    left:0;
    float:left;
    -webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
}

#top_blur {
    width:940px;
    margin:0 auto;
    height:70px;
    z-index:1;
    /*background-color: red;
    background-repeat: no-repeat;*/
    position:fixed;
}

.header {
    width:940px;
    margin:0 auto;
    position: fixed;
    /*top: -70px;*/
    z-index: 801;
}

这是html

<body><div id="wrapper">
<div id="topbar"></div>
<div id="top_blur"><img src=/images_/backgrounds/top_blur.png></div>
<div class="header"> header content here</div></div>

溢出：滚动;

是否有强制滚动条修复移动页面错误，当滚动条打开vs关闭时，brosers必须停止整页移动 - 我已尝试将此设置为自动，但在最小化时仍然没有滚动条

Answer 1

使用：

overflow: scroll;

即使不需要，您也会强制滚动条。试试看：

overflow: auto;

仅在需要时显示栏。

Answer 2

这里的重要部分是因为DIVS中的那些固定位置...这就是为什么你的滚动没有效果。

希望这有帮助

Answer 3

Aaarrrgh - 我错过了"</div>" @philip badilla促使重新计票！

双滚动条但没有滚动

3 个答案: