溢出时滚动条消失：自动应用

Question

我有一个页脚和内容框。页脚是固定的，因此在任何滚动点都可以看到。内容框的高度为100％，但它的上升在页脚开始之前结束（这样它就不会越过页脚框而且会失败。）

<div id="footer" style="border:4px solid black;"></div>
<div id="content" style="border:4px solid blue;"></div>

问题来了。 #content有一个overflow：auto参数，它会破坏浏览器的右侧滚动条。在我的真实例子中，结果变得更加可怕（在应用拉伸背景的同时#content图片覆盖滚动条使其不可见）。

这是一个JSFiddle链接：http://jsfiddle.net/TAVmF/7/

请注意，我希望滚动条位于正确的位置，而不只是出现在窗口的#content部分。

谢谢大家。

编辑：

在这张照片上可以看到问题：

Answer 1

html
{
    height:100%; 
    max-height:100%;  
    padding:0; 
    margin:0; 
}

更改为

html
{ 
    padding:0; 
    margin:0; 
}

Answer 2

更改#content {height：98％; } 尝试

Answer 3

也许试试：

#content
{
    display:block;
    top:0;
    width: 100%;
    left:0;
    bottom:170px;
    overflow:auto;
    position:absolute;
}

从<div id="content">

中删除边框

完整示例：http://jsfiddle.net/EQV6S/13/

编辑：我认为这就是你想要的： http://jsfiddle.net/EQV6S/15/ 看看，请：）

Answer 4

如果您的#content高度设置为100％，但是您将其从底部向上推170px，则顶部170px将始终位于页面顶部。你需要设置一个小于100％的不同高度 - 170px，或者你可以尝试Method 3 of this answer here

Answer 5

为什么还剩下：250px的内容div？尝试删除left:250px;

<强> DEMO