Fatal编程技术网
  • html/
  • Html IE7中这个额外的滚动条来自哪里？

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

html css internet-explorer firefox

Html IE7中这个额外的滚动条来自哪里？,html,css,internet-explorer,firefox,internet-explorer-7,Html,Css,Internet Explorer,Firefox,Internet Explorer 7,我有一个CSS布局，它模拟一个固定框架的页面，有一个标题、一个左侧菜单和一个内容窗格 在Firefox中，这很好，但在InternetExplorer7中，在右侧有一个额外的滚动条。如果用鼠标移动额外的滚动条，它将仅滚动页面顶部的页眉。这几乎就像IE7将左侧菜单的height:100%解释为页面的整个高度，而不是页眉下方的区域 有办法解决这个问题吗 我的CSS: body{ margin: 0; padding: 0; border: 0; overflow: h

我有一个CSS布局，它模拟一个固定框架的页面，有一个标题、一个左侧菜单和一个内容窗格

在Firefox中，这很好，但在InternetExplorer7中，在右侧有一个额外的滚动条。如果用鼠标移动额外的滚动条，它将仅滚动页面顶部的页眉。这几乎就像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)*/
}

<!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>
我的HTML:

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)*/
}

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


CSS左侧和顶部框架布局
/***临时文本填充函数。部署模板时删除***/
var gibberish=[“这只是一些填充文字”，“Lorem ipsum dolor sit amet”，“此处无需阅读”]
函数填充文本（单词）{

对于（var i=0；iIE7确实将100%解释为整页高度。您不能让左侧菜单从顶部开始：0px，并让其顶部填充100px吗


另外，将左侧菜单从
绝对
更改为
固定
无效。它按预期填充，但第二个滚动条仍在那里，显示相同的行为。填充现在导致它。看起来我需要的是高度：100%减100像素。100%减100像素=不可能。我担心……怎么样修复了左侧菜单的位置？它没有发布。如果你有IE7，你可以将上面的代码粘贴到HTML和CSS文件中，问题会立即出现。如果我将#FrameContentLeft更改为fixed，我会得到一个空的滚动条。这比以前好，但我仍然希望那里没有滚动条，除非左菜单需要它。