双滚动条调整大小与最大化和恢复浏览器窗口

我有一个标题，内容和页脚。

现在页眉和页脚有一个固定的高度，并始终在屏幕上。

CSS的页脚和页眉：

#footer { 
    background-color:#e6e6e6; 
    width:100%; 
    height:46px; 
    bottom:0; 
    left:0; 
    position:fixed; 
    border-top:1px solid #7F8C8D; 
    z-index:101; 
} 


#header { 
    border-bottom:1px solid black; 
    height:45px; 
    background-color:#828282; 
    color:#FFF; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    z-index:105; 
    width:100%; 

    box-sizing:border-box; 
}

至于内容，我有以下几点：

#content { 
    background: #9cbbe3 url(../img/backgr.gif) repeat-x; 
    right:0; 
    left:0; 
    background-size:auto; 
    position: absolute; top: 0px; bottom: 0px; 
    overflow: auto;  
}

现在这个作品！起初...

但是，然后我去最大化和最小化窗口，我最终有两个滚动条。当我刷新页面问题已修复。并根据我的注意力重新调整大小。但是当最大化和恢复窗口时，我最终得到两个滚动条。

我该如何解决这个最好使用CSS？

来源

2013-07-08 Nick V

也许这个作品出来你：

html, body { overflow: hidden; }

来源

2013-07-08 13:23:48 LinkinTED

对不起，它似乎是我想的某种缓存问题。由于某种原因，现在所有的工作。清理缓存足够多次，但这次我删除了我所拥有的所有东西，这就是诀窍。我的错。尽管我还剩下几页，但它在整个页面上不停地给我一个滚动条，当它不是neccesairy时就解决了这个问题。所以我会标记它，因为它可能会帮助一些人摆脱第二个滚动条。 –

试着改变你的overflow

overflow: auto;

到：

overflow: hidden;

来源

2013-07-08 13:22:16 Stefan

嗨，这解决了双滚动条然而滚动条现在似乎越过页眉和页脚，而不仅仅是在内容最大化时 - >恢复窗口。刷新后滚动条只出现在我想要的内容中。所以这解决了双滚动条问题，但滚动条在错误的地方。 –

@NickV，js与你的代码一起学习会非常有帮助！ – Stefan

对不起，调整错误的CSS我得到以下结果：当最小化 - >最大化这会导致滚动条上显示页眉和页脚。刷新时会导致滚动条完全消失。也是的jsFiddle确实有用，但我想知道如果没有一个干净的CSS解决方案，这个问题。 –

双滚动条调整大小与最大化和恢复浏览器窗口

回答

相关问题