1

他のサイトから表示されるヘッダーと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" lang="en"> 
<head> 
    <style type="text/css"> 
    *{margin:0;padding:0} 
    html, body {height:100%;width:100%;overflow:hidden} 
    table {height:100%;width:100%;table-layout:static;border-collapse:collapse} 
    iframe {height:100%;width:100%} 
    .header2 {border-bottom:1px solid #000;height:90px;} 
    .content2 {height:100%} 
</style> 
</head> 
<body>
<table>
<tr>
    <td class="header2">
    asdasdasdasd
    </td>
</tr>
<tr>
    <td class="content2">
        <iframe src="http://www.w3schools.com" scrolling="auto" frameborder="1" />
    </td>
</tr>
</table>
</body>
</html>

問題は、このコードが完全なフッターを表示しないことです（ヘッダー部分のために90ピクセルがページから外れています）。

4

2 に答える 2

6

テーブルは私の目を傷つけています。position: absoluteこれについては深刻に過小評価されています。代わりに次のレイアウトを試してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Test Layout</title>
        <style type="text/css">
            body, html
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
            #header
            {
                position:absolute; left: 0; top: 0; right: 0; height: 90px; background: red;
            }
            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90);
            }
        </style>
    </head>
    <body>
        <div id="header">
            Test content
        </div>
        <div id="content">
            <iframe width="100%" height="100%" src="startdoc.html" />
        </div>
    </body>
</html>

IE6まで、そしてこれまでに最小限のハックでテストしたすべてのブラウザーで正しくレンダリングするためのボーナスポイント:)

于 2012-10-19T12:04:28.123 に答える
0

ヘッダーを絶対位置に設定して、次のようにiframeにオーバーレイします。

<table>
<tr style="position:absolute;top:5px">
    <td class="header2">
    asdasdasdasd
    </td>
</tr>
<tr>
    <td class="content2">
        <iframe src="http://www.yahoo.com" scrolling="auto" frameborder="1" />
    </td>
</tr>
</table>​​​
于 2012-10-19T12:05:17.953 に答える