要素の高さを取得して付与したい

yasuko

V6の終わりが近づいています

高さが可変になるヘッダーやフッターを使っていると、

どうしても高さを取得してなんらかの処理をすることが発生します。

ヘッダーの高さを取得してヘッダー下のmain要素にパディングを

$(function() {
var h = $('header');
$("main").css( { 'padding-top' : h.outerHeight() + 'px'});
});	

ヘッダーを position:fixed; としていると高さがない（表現が正しいかは謎ですがｗ）ので、ヘッダー下の要素に padding-top を付与しないと重なっちゃいますね。

フッターの高さを取得してトップへ戻るボタンをフッターの上に置く

$(function() {
var h = $('footer');
$("#page-top").css( { 'bottom' : h.outerHeight() + 10 + 'px'});
});	

トップへ戻るボタン #page-top を position:fixed; しているとして、フッターの上 10px の場所に置くような時は、取得した高さに数値を足すとＯＫ！

高さ取得にはいろいろ種類がある

paddingの内側

height()

borderの内側を取得

innerHeight()

borderを含めて取得

outerHeight()

marginも含めて取得

outerHeight(true)

ブラウザの高さを取得

var h = $(window).height();

コピペできるようにベーシックなスタイル。