如何解決CSS布局中的向下滾動問題

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進行測試。 我需要向下滾動放置在整個網頁上，這時他們跳過標題部分。

替代文字

最好的祝福。 （已編輯）

Answer 1

您為iframe設置height:100% ，而footer也有z-index。 因此，iframe占據了整個高度，但它位於頁腳后面，因此看不到正確的滾動條。 從html代碼中的iframe標記中刪除height="100%" ，然后在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 個解決方案

解決方案1
0 2010-12-30 10:22:49

解決方案2
0 2010-12-30 13:02:06

如何解決CSS布局中的向下滾動問題

問題描述

2 個解決方案

解決方案1 0 2010-12-30 10:22:49

解決方案2 0 2010-12-30 13:02:06

解決方案1
0 2010-12-30 10:22:49

解決方案2
0 2010-12-30 13:02:06