jQuery | CSSでdisplay:none;にしている要素の高さや幅は取得できない

Lightbox風のモーダルウィンドウをjQueryで実現する際に、ハマったのでメモ。

モーダルウィンドウ内に表示するのはimgではなくHTML。
その中にfloatで横並びにした要素Aと要素Bを配置。
要素Aの高さを、要素Bの高さに合わせようとした。

基準となる要素Bの高さが、ユーザーPC環境や今後の更新等で変わる可能性があるため、Javascript（jQuery）で要素Bの高さを取得して、それを要素Aに適用する方法にしたのだが…

↓こんな感じ。

$(function(){
	var heigth = $('要素Bのセレクタ').height();
	$('要素Aのセレクタ').css('height', height);
});

モーダルウィンドウ内部のCSSやjQueryを設定していく段階では、当然ながら画面に表示されている状態で作業をするので、特に問題もなく狙い通りの表示。しかし、モーダルウィンドウですから、初期状態は非表示なわけです。なので、モーダルウィンドウのCSSの初期状態は「display:none;」。

これが問題だった。

display:noneの状態では、ロードされていないという理由なのか、高さや幅などの情報が取得できない。

↓heightの値は「０」です。

var heigth = $('要素Bのセレクタ').height();
console.log(height);

で、どうすりゃいいんでしょうねえ。別の方法を考えなくては。