1

私はHTMLとCSSが得意だと思います。私が苦労しているのは、JavaScriptに触れ始めたときです。私はそれのいくつかを理解することができますが、私は私の人生のためにそれを書くことができませんでした！とはいえ、私はどんな方法でも学ぼうとしています。このjQueryスクリプトをまとめて、相対位置の上部divと絶対位置の下部divの間にdivを垂直方向に中央揃えすることを目標としています。それは私のためにうまくいきません、笑。

jQueryの操作方法を学び、独自のスクリプトを作成しようとしているので、これを機能させたいと思います。しかし、私の目標を達成するためのより良い方法があれば、私もその方法であなたの入力を大いに感謝します！

<script type="text/javascript">
$(document).ready(function() {
$(window).ready(function(){
vertical_height()
});
$(window).resize(function(){
vertical_height()
});
function vertical_height(){
var doc_height = $(document).height();
var head_height = $(".headcontent").height();
var mid_height = $(".midcontent").height();
var foot_height = $(".footer").height();
var pos_height = Math.round(head_height+foot_height);
var neg_height = Math.round((head_height-foot_height)/2);
var fin_height = Math.round(doc_height-(pos_height-neg_height));
$('.midcontent').css({
"marginTop","-"+fin_height+"px",
"marginBottom","-"+fin_height+"px"
}
}
});
</script>

.headcontentはトップdivです。

.midcontentは、中央に配置したい中間divです。

.footerは一番下のdivです。

4

2 に答える 2

1

何かを計算するときのちょっとしたヒントです。最終的な数値に達するまで丸めないでください。

h = Header Height

f = Footer Height

m = Middle Height

d = Document Height

s = Height of the space above or below the div

ここでは、ドキュメントの高さが他のすべての要素を組み合わせた高さと同じであると想定しています。中央のdivの上下に等しいスペースがあるため、2つのスペースがあります。

d = h + f + m + 2s

d - h - m -f = 2s

(d - h - m - f) / 2 = s

これをJavaScriptに入れましょう

$(document).ready(function() {

    $(window).resize(vertical_height());

function vertical_height() {
    var doc_height = $(document).height();
    var head_height = $(".headcontent").height();
    var mid_height = $(".midcontent").height();
    var foot_height = $(".footer").height();
    var fin_height = Math.round((doc_height - head_height - mid_height - foot_height) / 2);
    $('.midcontent').css("margin-top", fin_height)
  }
});

cssの場合、絶対位置のフッターが下部に固定されると想定しているため、上部マージンを追加するだけでヘッダーから離れます。

これが実用的なフィドルです：http：//jsfiddle.net/nBUnt/14/

于 2012-08-03T00:17:17.930 に答える
1

これがあなたのコードで、実行されるものに整理されています：

$(function() {
    function vertical_height() {
        var doc_height = $(document).height();
        var head_height = $(".headcontent").height();
        //var mid_height = $(".midcontent").height();//not used
        var foot_height = $(".footer").height();
        var pos_height = head_height + foot_height;
        var neg_height = (head_height - foot_height) / 2;
        var fin_height = doc_height - (pos_height - neg_height);
        $('.midcontent').css({
            "marginTop": "-" + fin_height + "px",
            "marginBottom": "-" + fin_height + "px"
        });
    }
    $(window).resize(vertical_height).trigger('resize');
});

これで、アルゴリズムを正しくすることに集中できます。

現状では、式を組み合わせて単純化すると、次のようになります。

var fin_height = doc_height - head_height*3/2 - foot_height*3/2;

これは私には正しく見えませんが、私は間違っている可能性があります。

編集

重複を避けるために、このバージョンを試してください：

var $$ = {}; //jQuery object cache.
$$.w = $(window);
$$.h = $(".headcontent");
$$.m = $(".midcontent");
$$.f = $(".footer");
function vertical_height() {
    var w = $$.w.height(),
        h = $$.h.outerHeight(true),
        m = $$.m.outerHeight(),
        f = $$.f.outerHeight(true),
        fin_height = Math.max(0, (w - h - m - f) / 2);
    $$.m.css('marginTop', Math.floor(fin_height)).css('marginBottom', Math.ceil(fin_height));
    $$.h.text(fin_height);
};
$(window).on('resize', vertical_height).trigger('resize');

デモ

ノート

  • position:absoluteフッターのCSSから削除されました
  • $$サイズ変更ハンドラーの作業を減らすために、jQueryオブジェクトがキャッシュされるようになりました。
  • ドキュメントの高さではなく、ウィンドウの高さに基づいて計算されるようになりました。
  • .outerHeight(false)3つのdivは、垂直方向のパディングと境界線を含むように測定されました。
  • オーバーラップはによって防止されMath.max(0, ...)ます。これにより、フィンの高さが負になることはありません。
  • このステートメント$$.h.text(fin_height);はデバッグ用であり、削除できます。

編集2

次のコードは、サイズ変更イベントを「デバウンス」します。

交換 ：

$(window).on('resize', vertical_height).trigger('resize');

と ：

var do_resize;
$(window).on('resize', function(){
  clearTimeout(do_resize);
  do_resize = setTimeout(vertical_height, 100);
}).trigger('resize');
于 2012-08-03T00:39:21.037 に答える