1

私はいくつかのjavascriptを使用してページの高さを計算し、次にdivでmin-heightを設定しています。これは、コンテンツが不足しているページのフッターをページの下部にプッシュするためです。私の問題は、最小の高さが約30〜40ピクセルから大きく、スクロールバーが発生することです。（注：私はさまざまな理由でスティッキーフッターのようなソリューションを使用しておらず、このソリューションを好みます。）

これが私のコードです：

JS

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

HTML

 <header class="container">
 <div id="menu" class="row">
   <!-- Content -->
 </div>
</header>

<div id="page-content">
  <!-- Content --> 
</div>

<footer>
  <!-- Content --> 
</footer>

問題は私のCSSにあると思います。たとえば、ヘッダーには次のようにマージンがあります。

#menu{
 margin: 5px auto 10px;
}

そのコードを削除すると、スクロールバーが少し減ります。（ページに他の余白を設定しているので、これだけを変更しても解決策としては機能しません）。

ヘッダーや他のセクションのマージンを考慮してJSコードを書き直すにはどうすればよいですか？

4

5 に答える 5

1

何らかの理由で、JSはマージンを計算していません。ヘッダーとフッターにある余白を追加すると、合計で45ピクセルになりました。したがって、スクリプトは次のようになります。

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

45pxを追加すると、スクリプトが正しく機能するようになりました。

于 2012-11-18T00:38:51.173 に答える
1

ボックスの高さは、どちらも通常のボックス要素であるため<header>、 child のマージンを反映しません。また、マージンがある場合、それらは のマージンと重なります。この場合、ヘッダーの高さには、コンテンツの高さの一部が含まれます。意味がありません。#menu#page-content#menu

問題はマージンの崩壊です: http://www.w3.org/TR/css3-box/#collapsing-margins

そのページが説明しているように、いくつかの方法でマージンを折りたたまないようにブラウザーに指示できます。

  • ルールに追加display: inline-block;します#menu { }（私の最初の提案）
  • あなたに追加overflow: hidden;しますheader { }（アライメントの問題がある場合は、より良い提案になる可能性があります）
  • <header>絶対に配置するか、浮かせます。または、#menu内側にそれを行います。

または、ハックしたい場合は、ヘッダーの高さを手動で計算できます。

var header_height = $("header").outerHeight() +
   parseInt($("header").children().css('margin-top'), 10) +
   parseInt($("header").children().css('margin-bottom'), 10);

今考えてみると、これは理にかなっており、css 仕様は正しいことをしていると思います。

更新: http://jsfiddle.net/HzBSz/2/

参照:外側の要素のマージンが内側の要素のマージンと等しくない

于 2012-11-15T03:42:15.603 に答える
0

おそらく、このhttp://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-pageを見ると 、問題が解決する可能性があります。

于 2012-11-15T04:17:40.620 に答える
0

フッターを一番下に手動で配置しないのはなぜですか? つまり、あなたがしたくないと言ったのは知っていますが、なぜですか? 常にそこに置きたい場合は、

position:relative;
bottom:0;

ページの残りの部分と一緒にスクロールしたい場合は（そうかもしれませんが）、使用します

position:absolute;

代わりは。これは、動的にダミー コンテンツを挿入してフッターを押し下げるよりもはるかに優れた方法です。

于 2012-11-15T03:37:37.950 に答える
0

.height() または .outerHeight() の代わりに、すべての要素に対して .outerHeight(true) を試してください。

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

.height() - パディング、ボーダー、マージンを除いた要素の高さを返します。

.innerHeight() - 要素の高さを返します。パディングは含まれますが、ボーダーとマージンは除外されます。

.outerHeight() - 境界線を含む div の高さを返しますが、マージンは除外します。

.outerHeight(true) - マージンを含む div の高さを返します。

于 2012-11-15T05:32:17.103 に答える