0

これは Chrome で動作します: http://jsfiddle.net/EtNgv/ IE と Firefox で動作させたいです。

他の同様の質問への回答では、それは不可能であるとのことでしたが、Chrome では可能であるとは言及されていませんでした。

望ましい結果:

100% の高さを占めるコンテナー div ですが、それ以上はありません。高さがコンテンツによって決定されるヘッダーとフッターの div をラップします。フッター div は、常にページの下部と同じ高さになります。ヘッダーとフッターの間に広がる中央の div。コンテンツがオーバーフローする場合は、スクロールする必要があります。

画像: http://i.stack.imgur.com/e7ddc.png

現在の実装:

CSS:

html,
body {
   height:100%;
   margin:0;
}
#container {
   display:table;
   height:100%;
   width:100%;
}
#header,
#footer {
   display:table-row;
   background-color:#FC0;
   height:2px;
}
#middle {
   display:table-row;
   overflow:hidden;
   position:relative;
}
#content {
   height:100%;
   overflow-y:scroll;
}

HTML:

<div id="container">
    <div id="header">header<br/>header line 2<br/></div>
    <div id="middle">
        <div id="content">Burrow under covers...</div>
    </div>
    <div id="footer">footer</div>
</div>

これは Chrome では機能しますが、IE と Firefox では、コンテンツが中央の div よりも大きい場合、コンテナーの高さが 100% よりも大きくなり、ページにスクロール バーが表示されます。

4

1 に答える 1

0

まあ、近づいたけど、まだずさんな感じです。画面の高さ、#footer、#header などを決定するために jQuery を使用せずに、このようなページを作成することは想像できません...

Forked Fiddle:

http://jsfiddle.net/mRDux/

于 2013-08-21T22:24:48.317 に答える