1

私の全体的な目標は、高さ 100% のコンテンツと粘着性のあるフッターの間にマージンを作ることです。それを通して体の背景を示すもの。

現在、jQuery を使用してドキュメントの高さを計算し、フッターの高さと余白を差し引いて、その新しいサイズを ID が「コンテンツ」の DIV に適用しています。

次に、jQuery の resize() 関数を使用して、ビューポートのサイズが変更された場合に div のサイズも変更します。これにより、ユーザーがブラウザー ウィンドウのサイズを変更したりズームインしたりすると、DIV のサイズが自動的に更新されます。

残念ながら、ズームの方向を切り替えると (つまり、ズームイン後にズームアウトする、またはその逆)、Javascript はビューポートのサイズ変更を認識せず、コンテンツの背景が長すぎたり短すぎたりします。さらに、このサイズ変更はコンテンツを認識しません。CSS で min-height を設定することを検討していますが、Javascript でそれを行う方法があれば、私はすべて耳にします。

私は純粋な CSS と HTML のソリューションを受け入れます。それは可能なはずですが、答えを探すのに疲れ果ててしまいました。

私の現在のJavascript（jQueryライブラリ1.7.2を実行）：

$(document).ready(function(){

  var height1 = $(document).height(); // height of full document

  var height2 = 100; // height of footer plus margin

  var height_diff = height1 - height2 +"px";

  document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV.

});

$(window).resize(function () { 

  var height1 = $(document).height(); // height of full document

  var height2 = $("#footer").height(); // height of footer

  var height_diff = height1 - height2 +"px";

  document.getElementById('content').style.height = height_diff; // Set the remaining height in test DIV. 

});

どんな方向でも大歓迎です。

編集

すべて Javascript なしでわかりました。http://jsfiddle.net/Rpdr9/610/

4

1 に答える 1