0

私は実際にdivを操作しようとしていますが、次の単純なテーブルレイアウトに相当するものを取得できないようです:

<!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>
    <title>Table example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
      html, body {height: 100%}
      .content {width: 750px; vertical-align: top}
    </style>
  </head>
  <body style="margin: 0; padding: 0">
    <table style="height: 100%; width: 100%; border-collapse: collapse">
      <tr style="background-color: #666666">
        <td></td>
        <td class="content" style="height: 100px"><h1>Header Content</h1></td>
        <td></td>
      </tr>
      <tr style="background-color: #BBBBBB">
        <td></td>
        <td class="content" style="background-color: #FFFFFF"><h1>Main Content</h1></td>
        <td></td>
      </tr>
      <tr style="background-color: #666666">
        <td></td>
        <td class="content" style="height: 100px"><h1>Footer Content</h1>
        </td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

残しておきたい重要な要素：

  1. 実際のコンテンツは固定幅です。(この場合、750px)

  2. ヘッダーとフッターの背景は、ページ幅の 100% に拡張されます。

  3. メイン コンテンツの背景は水平方向には拡張されませんが、ヘッダーとフッターの間の領域を埋めるために垂直方向に拡張されます。

  4. メインコンテンツの高さがそれほど高くない場合でも、フッターは常にページの下部にあります。

私は多くの戦略を試しましたが、div を使用してページの下部にフッターを保持する少なくとも 2 つの異なる方法を見つけました。残念ながら、メイン コンテンツが div にある場合、短いページのヘッダーとフッターの間のスペースを埋めるために垂直方向に拡張する方法はないようです。

編集: quirks モードでなくても機能することを示すように例を変更しました。上記が有効です。

編集2：

ほとんどの場合、javascript を使用してこれを行う方法を見つけました。だから、私の質問は次のとおりだと思います：javascriptなしでこれを行うにはどうすればよいですか。これが私が使用しているものです（これはfirefoxでのみ機能すると確信していますが、修正できます）：

<script type="text/javascript">
function changeDiv() {
    document.getElementById("content").style.minHeight = document.body.clientHeight - 200 + "px";
}
changeDiv();
window.onresize = changeDiv;
</script>

「コンテンツ」は、展開したいメインのコンテンツ div を指定します。

4

5 に答える 5

0

これが私の試みです。FF3とIE8では問題ないようです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
html, body { padding: 0; margin: 0; }
div { padding: 1px; }
#wrapper, #wrapper-top, #wrapper-bottom { position: absolute; left: 0; right: 0; width: 100%; }
#wrapper-top { background-color: #666; height: 100px; top: 0; }
#wrapper-bottom { background-color: #666; height: 100px; bottom: 0; }
#wrapper { top: 100px; bottom: 100px; background-color: #DDD; }
#header, #content, #footer { width: 750px; margin: 0 auto; height: 100%; min-height: 100%; }
#content { background-color: white; }
</style>
</head>
<body>
<div id="wrapper-top">
  <div id="header"><h1>Header Content</h1></div>
</div>
<div id="wrapper">
  <div id="content"><h1>Main Content</h1></div>
</div>
<div id="wrapper-bottom">
  <div id="footer"><h1>Footer Content</h1></div>
</div>
</body>
</html>

注： DOCTYPEは重要であり、IEで互換モードを強制します。

于 2009-03-29T12:40:54.333 に答える
0

コンテンツがビューポートの高さよりも大きいかどうか、またはコンテンツが下部に完全に届かない場合（ただし、フッターを下部に表示したい場合）に応じて、フッターをページの下部に固定するには、FooterStickを実装してみてください。

于 2009-03-29T12:51:02.593 に答える
0

あなたの本当の質問は、「メインの div を展開し、フッターをページの一番下に移動するにはどうすればよいか」のようです。

答えは次のようになります。少なくとも、HTML 4.0 トランジショナル以降を指定する doctype を使用する場合は、テーブルでもそれを行うことはできません。はい、doctype がなくても機能しますが、その場合、ブラウザーが「癖モード」に入るからです。

絶対配置でそれを行うことができると思います。おそらく例を見たことがあるでしょう。個人的には、フッターに固定配置を使用し、z オーダーを大きくしてコンテンツの上にレンダリングし、グラデーション効果を使用してメイン コンテンツをその背後に非表示にするアプローチを検討したいと思います。これが例です（私よりもはるかに優れた人によって作成されました）：http://www.designbyfire.com/

于 2009-03-29T12:14:06.347 に答える
0

これは、IE 以外のブラウザーで実行できます。ただし、IE (少なくとも IE7 以降) では、テーブルとできれば条件付きコメントを使用する必要があります。

テストする時間はありませんでしたが、これを試して動作するかどうかを確認してください。

html では、厳密な doctype を使用します。できればこのようなxhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

これを本体に入れます：

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

そしてcssで：

div.header,
div.content,
div.footer {
    position: absolute;
}

div.header {
    top: 0;
    height: 20px;
}

div.footer {
    bottom: 0;
    height: 20px;
}

div.content {
    top: 0;
    bottom: 0;
    /*can't remember if it was margin or padding, if one doesn't works, try the other*/
    margin-top: 20px;
    margin-bottom: 20px;
}
于 2009-04-10T16:33:15.207 に答える