IE7 中这个额外的滚动条是从哪里来的？答案

【问题标题】：Where is this extra scroll bar in IE7 coming from?IE7 中这个额外的滚动条是从哪里来的？
【发布时间】：2009-11-07 08:36:40
【问题描述】：

我有一个模拟固定框架页面的 CSS 布局，带有标题和左侧菜单以及内容窗格。

在 Firefox 中，这可以正常工作，但在 Internet Explorer 7 中，右侧有一个额外的滚动条。如果你用鼠标移动额外的滚动条，它只会滚动页面顶部的页眉。这几乎就像 IE7 将左侧菜单的 height: 100% 解释为页面的整个高度，而不是标题下方的区域。

有没有办法解决这个问题？

我的 CSS：

body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
}

#framecontentTop { 
    position: absolute; 
    top: 0; 
    left: 0;
    right: 0;
    width: auto;
    height: 100px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars.*/
    background-color: #90B3DC;
    color: white;
}

#framecontentLeft {
    position: absolute; 
    top: 100px; 
    left: 0; 
    bottom: 0;
    width: 300px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars.*/ 
    background-color: #90B3DC;
    color: white;
}

#maincontent{
    position: fixed; 
    left: 300px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 100px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

我的 HTML：

<!DOCTYPE html>
<html>
<head>
<title>CSS Left and Top Frames Layout</title>
<link href="Frames.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Lorem ipsum dolor sit amet", "nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>

<body>
    <div id="framecontentLeft">
        <div class="innertube">
            <h3>Sample text here</h3>
        </div>
    </div>

    <div id="framecontentTop">
        <div class="innertube">
            <h1>CSS Left and Top Frames Layout</h1>
            <h3>Sample text here</h3>
        </div>
    </div>

    <div id="maincontent">
        <div class="innertube">
            <h1>Content Title</h1>
            <p><script type="text/javascript">filltext(255)</script></p>
        </div>
    </div>
</body>
</html>

【问题讨论】：

标签： html css internet-explorer firefox internet-explorer-7

【解决方案1】：

IE7 确实将 100% 解释为整个页面高度。你不能让左边的菜单从 top: 0px 开始，让它有一个 100px 的 padding-top 吗？

另外，将左侧菜单从 absolute 更改为 fixed。

【讨论】：

没用。它按预期填充，但第二个滚动条仍然存在，表现出相同的行为。
填充现在导致它。看起来我需要的是高度：100% 减去 100 像素。
100% 减去 100 像素 = 恐怕不可能.....左侧菜单的固定位置怎么样？
它没有发布。如果您有 IE7，您可以将上面的代码粘贴到 HTML 和 CSS 文件中，问题会立即出现。
如果我将#FrameContentLeft 更改为固定，我会得到一个空滚动条。这比以前好多了，但我仍然希望那里根本没有滚动条，除非左侧菜单中的内容需要它。