如何解决 CSS Layout 中的向下滚动问题答案

【问题标题】：How to solve scroll down problem in CSS Layout如何解决 CSS Layout 中的向下滚动问题
【发布时间】：2010-12-30 23:02:39
【问题描述】：

我不是 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 进行测试。我需要将向下滚动放置在整个网页上，此时他们会跳过标题部分。

最好的问候。（已编辑）

【问题讨论】：

请详细说明问题，您的意思是您不想将页脚固定在最后吗？
这个滚动条是iframe的滚动条，不能让它滚动整个页面。

标签： html css scroll

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：