4

これは私が達成したいことです:

期待される結果

  • コンテンツがビューポートを垂直に満たしていない場合でも、フッターは画面の下部に留まる必要があります。
  • コンテンツ列には、コンテンツの高さが常に 100% になる境界線があります。列の数と幅はページごとに変わるため、背景画像から偽の列の境界線は使用できません。
  • すべてのコンテンツが表示されている場合、スクロールバーは表示されません (例 1)。
  • 解決策はすべて HTML/CSS であり、JS ではありません。
  • 最小ブラウザ サポートは、IE9+ および Firefox、Chrome、Safari、Opera の最新のデスクトップ バージョンである必要があります。癖のないモード。
  • ヘッダー/フッター/コンテンツの幅は常に固定されています (ヘッダーとフッターをコンテンツ領域内に配置する必要はありません)。ヘッダーとフッターの高さも固定されています。

Fluid Width Equal Height Columnsとこのスティッキー フッターの例の手法を試しましたが、すべての要件を同時に満たすことはできませんでした。どんなヒントでも大歓迎です。

編集：これまでのところ、私が得た最も遠いのは、Webkitブラウザーでは正しく機能するテーブルを模倣することですが、IE9とOperaでは機能しません。ここでフィドルを参照してください。

HTML:

<div class="table outer">
    <div class="row header">
        <div class="cell">header</div>
    </div>
    <div class="row content">
        <div class="cell">
            <div class="table inner">
                <div class="row">
                    <div class="cell">content 1</div>
                    <div class="cell">content 2</div>
                    <div class="cell">content 3</div>
                </div>
            </div>
        </div>
    </div>
    <div class="row footer">
        <div class="cell">footer</div>
    </div>
</div>

CSS:

html, body {
    height: 100%;
}
.table {
    display: table;
    min-height: 100%;
    height: 100%;
}
.table.outer {
    width: 500px;
    margin: 0 auto;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.header, .footer {
    height: 25px;
    background-color: #999;
}
.content {
    background-color: #eee;
}
.table.inner {
    width: 100%;
    min-height: 100%;
    height: 100%;
}
.table.inner .cell {
    width: 33%;
    border-right: 1px dashed #c00;
}
4

3 に答える 3

4

意味的に望ましい解決策ではありませんが、記載されているすべての要件を達成するために私が見つけた唯一の方法は、90 年代に戻ってレイアウトにテーブルを使用することです。

ここでフィドルを参照してください。

HTML:

<!DOCTYPE html>
<html>    
<head>
    <meta charset="utf-8">
</head>
<body>
    <table class="outer">
        <tr>
            <td class="header" colspan="3">header</td>
        </tr>
        <tr class="content">
            <td>content1</td>
            <td>content2</td>
            <td>content3</td>
        </tr>
        <tr>
            <td class="footer" colspan="3">footer</td>
        </tr>
    </table>
</body>
</html>

CSS:

html, body {
    height: 100%; margin: 0;
}
.outer {
    min-height: 100%;
    height: 100%;

    width: 500px;
    margin: 0 auto;
}
.header, .footer {
    height: 25px; background-color: #999;
}
.content td {
    width: 33%;
    background-color: #eee;
    border-right: 1px dashed #c00;
    vertical-align: top;
}
于 2012-11-02T13:03:04.843 に答える
0

これを試して ：

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
于 2012-11-02T08:00:34.423 に答える