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中的額外滾動條從哪裏來？

回答

相關問題