Question

我不是CSS的专家，我在使用模板时遇到了一些麻烦。问题出在向下滚动中。我无法正确地将它们放在所有模板中。

我在这里有完整的模板代码。只需复制/粘贴即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer layout basic method </title>
<style type="text/css" media="screen">
    #printhead {display:none;}

    html {
        height:100%; 
        max-height:100%; 
        padding:0; 
        margin:0; 
        border:0; 
        background:#fff; 
        font-size:80%; 
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
        /* hide overflow:hidden from IE5/Mac */ 
        /* \*/ 
        overflow: hidden; 
        /* */ 
    }

    body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

    #content {display:block; height:100%; max-height:100%; overflow:hidden; padding-left:0px; position:relative; z-index:3; word-wrap:break-word;}

    #head {position:absolute; margin:0; top:0; right:18px; display:block; width:100%; height:50px; background:#fff; font-size:1em; z-index:5; color:#000; border-bottom:1px solid #000;}

    #foot {position:absolute; margin:0; bottom:-1px; right:18px; display:block; width:100%; height:25px; background:#fff; color:#000; text-align:right; font-size:2em; z-index:4; border-top:1px solid #000;}

    .pad1 {display:block; width:18px; height:50px; float:left;}

    .pad2 {display:block; height:50px;}

    .pad3 {display:block; height:500px;}

    #content p {padding:5px;}

    .bold {font-size:1.2em; font-weight:bold;}

    .red {color:#c00; margin-left:5px; font-family:"trebuchet ms", "trebuchet", "verdana", sans-serif;}

    h2 {margin-left:5px;}

    h3 {margin-left:5px;}
</style>
</head>
<body>
<div id="head">
    <div class="pad1"></div><h1>Header</h1>
</div>
<div id="content">
<div class="pad2"></div>
    <IFRAME name="teste" src="http://www.yahoo.com" width="100%" height="100%" frameborder=0></IFRAME>
<!--<div class="pad3"></div>-->
</div>
<div id="foot">Footer</div>
</body>
</html>

有人可以给我一些线索，告诉我如何解决这个问题？

请参阅下图，我正在使用Firefox进行测试。我需要向下滚动整个网页，并在这一刻他们跳过标题部分。

alt text

最诚挚的问候。（编者）

Answer 1

您为height:100%设置了iframe，并为footer设置了z-index。所以iframe占据整个高度，但它在页脚后面，所以你看不到滚动条的正确性。从html代码中的height="100%"标记中删除iframe，然后在css代码的iframe选择器中添加固定高度，例如height:500px;

Answer 2

我不认为如果不修复iframe的高度，或者使用javascript动态设置它的内容高度，就不能做到这一点。如果你可以这样做，你可以添加填充顶部和底部，然后将固定元素放在顶部。

由于Sotiris说滚动条位于你的iframe上，你需要滚动条位于容器上，但iframe没有固定的高度，你不能使容器的大小合适，以适应内部的标题，iframe和页脚。

希望这是有道理的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
    body {
        padding:0px; margin:0px; border:0px;
        background:#fff;
        font-size:80%;
        font-family: "trebuchet ms", tahoma, verdana, arial, sans-serif;
    }

    #heading {
        padding:0px; margin:0px; border:0px;
        display: block; position: fixed;
        top: 0px; right: 16px;
        height: 50px; width: 100%;
        z-index: 60;
        background-color: #ddf;
    }
    #heading h1 {
        padding:5px; margin:0px 0px 0px 16px; border:0px;
    }

    #container {
        padding:0px; margin:0px; border:0px;
        display: block; position: fixed;
        top: 0px; left: 0px;
        width: 100%; height: 100%;
        overflow: auto;
        z-index: 50;
    }

    #footer {
        padding:0px; margin:0px; border:0px;
        display: block; position: fixed;
        bottom: 0px; right: 16px;
        height: 30px; width: 100%;
        z-index: 60;
        background-color: #ddf;
    }
    #footer p {
        padding:5px; margin:0px 0px 0px 16px; border:0px;
    }

    iframe {
        width: 100%; height: 2000px;
        border: 0px;
        overflow: hidden;
        z-index: 30;
    }
</style>
</head>
<body>
    <div id="heading"><h1>Title</h1></div>
    <div id="container">
        <div style="height: 50px;">&nbsp;</div>
        <iframe name="test" src="http://www.yahoo.com"></iframe>
        <div style="height: 25px;">&nbsp;</div>
    </div>
    <div id="footer"><p>Footer</p></div>
</body>
</html>

如何解决CSS布局中的向下滚动问题

2 个答案: