我有一个模拟固定框架页面的 CSS 布局，带有一个标题和一个左侧菜单，以及一个内容 Pane 。
在 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>
最佳答案
IE7 确实将 100% 解释为整页高度。你不能让左边的菜单从顶部开始:0px 并让它有一个 100px 的 padding-top 吗？
此外，将左侧菜单从 absolute 更改为 fixed。
关于html - IE7 中这个额外的滚动条是从哪里来的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1691264/