Where is this extra scroll bar in IE7 coming from?
I have a CSS layout that simulates a fixed-frame page, with a header and a left side menu, and a content pane.
In Firefox, this works fine, but in Internet Explorer 7, there is an additional scroll bar along the right-hand side. If you move the extra scroll bar with the mouse, it will scroll just the header off the top of the page. It's almost as if IE7 is interpreting the height: 100% of the left side menu as the entire height of the page, rather than the area below the header.
Is there any way to fix this?
My 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)*/
}
My 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 temp开发者_StackOverflow中文版late. ***/
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 indeed interprets 100% as the full page height. Can't you let the left hand menu start at top: 0px and let it have a padding-top of 100px?
Also, change left hand menu to fixed from absolute.
加载中,请稍侯......
精彩评论