2

次のようなHTMLが欲しいのですが。

<header></header>
<div id='main'></div>
<footer></footer>

ここで、すべてが相対的に配置されることが好ましい。ヘッダーとフッターの高さは既知です。メインのdivで、デフォルトでページ全体を埋め、ヘッダーをページの最上部に、フッターをページの最下部に配置したいと思います。

ヘルプ？

4

4 に答える 4

3

jqueryの使用：

$(function() {
     var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight());
     $("#main").css("min-height",height+"px");
});

基本的に、メインのdivの高さをブラウザのビューポートの高さに設定し、ヘッダーとフッターの高さを差し引きます。

私はそれが役立つことを願っています:)

于 2012-06-29T01:35:42.743 に答える
1

編集：メインを90％に伸ばすよりも、設定する方がおそらく簡単です

style='height:100%; margin-top=[header height]; margin-bottom=[footer height]'

これにより、メインがページ全体の長さに保たれ、ヘッダーとフッターがコンテンツと重ならないようになります。試してみる。

于 2012-06-29T00:46:37.867 に答える
0

私があなたの質問を正しく理解していれば、解決策は実装されているようです

header {position: fixed;}

#main {min-height: 100%;}

footer {position: fixed;}

ここで完全な例を参照してください：http：//jsfiddle.net/J4jDu/1/

于 2012-06-29T02:09:44.080 に答える
0

これは、私のお気に入りのソリューションの1つです。

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

基本的に、100％最小の高さのラッパーがあり、そこから下部にフッター、上部にヘッダーを作成し、中央のコンテンツが残りを埋めます。

于 2012-06-29T03:52:41.023 に答える