Question

我有一个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>

Answer 1

IE7确实将100％解释为整页高度。难道你不能让左手菜单从顶部开始：0px并让它的填充顶部为100px？

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

IE7中这个额外的滚动条来自哪里？

1 个答案: