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

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 部分。

谢谢你们。

编辑：

从这张照片可以看出问题：

score 1 · Accepted Answer

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

改成

html
{ 
    padding:0; 
    margin:0; 
}

score 0 · Accepted Answer

0

改变 #content{ 高度：98%; } 尝试

于 2012-10-25T12:02:57.760 回答

score 0 · Accepted Answer

如果您的#content高度设置为 100%，但您将其从底部向上推 170px，则顶部 170px 将始终离开页面顶部。您需要设置一个小于 100% - 170px 的不同高度，或者您可以在此处尝试此答案的方法 3

score 0 · Accepted Answer

也许尝试：

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

并从中删除边框<div id="content">

编辑：我认为这就是你想要的：http: //jsfiddle.net/EQV6S/15/ 请检查一下 :)

score -1 · Accepted Answer

-1

为什么内容 div 有 left:250px ？尝试删除left:250px;

于 2012-10-25T11:58:12.173 回答

5 回答 5