IE7中的额外滚动条从哪里来？

我有一个CSS布局，模拟一个固定帧页面，一个标题和一个左侧菜单，以及一个内容窗格。IE7中的额外滚动条从哪里来？

在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>

来源

2009-11-06 Robert Harvey

IE7的确解释100％为整个页面高度。你不能让左手菜单从顶部开始：0px，让它有一个100px的填充顶部？

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

来源

2009-11-06 23:54:00

没有工作。它按预期填充，但第二个滚动条仍然存在，表现出相同的行为。 – 2009-11-06 23:58:40

填充正在导致它。它看起来像我需要的是高度：100％减去100像素。 – 2009-11-07 00:01:36

你能发布一个链接吗？ – 2009-11-07 00:02:40

IE7中的额外滚动条从哪里来？

回答

相关问题