ウインドウリサイズ時に、innerHeightの数値が更新されない

前提・実現したいこと

大変初歩的な内容で申し訳ありませんが、
お力お借りできれば幸いです。

子要素(#data)の高さを親要素(#x_data_area)のcssに代入しようと思い、
以下の記述をしてみたのですが、
ウインドウサイズを変えても、読み込み時に拾った数値を引き継いでしまいます。

どのように記述を変更すればよいでしょうか。

※tdひとつひとつの幅を200pxに指定する関係で、改行が走り、
ウインドウ幅によって子要素の高さが変動します。

発生している問題・エラーメッセージ

ページ読み込み時
#data:高さ500px
#x_data_area:高さ500px

↓ウインドウリサイズ

#data:高さ700px
#x_data_area:高さ500pxのまま ７００pxになってほしい

該当のソースコード

<div id="x_data_area">
<div id="data">
	<table>
	
	<tr>
            <td>aaaaaaaaaaaaaaaaaaaa</td>
            <td>bbbbbbb</td>
            <td>ccc</td>
	</tr>
		
	</table>
</div>
</div>

  <script>
$(document).ready(function(){
        var wH = $('#x_data_area').innerHeight();
        var divH = $('#data').innerHeight();
        if(wH < divH){
            $('#x_data_area').css('height',divH+'px');
        }
});</script>

試したこと

補足情報（FW/ツールのバージョンなど）

行動規範の内容に同意します

回答2件

自己解決

$(window).on('load resize', function(){
var wH = $('#x_data_area').innerHeight();
var divH = $('#data').innerHeight();
if(wH < divH){
$('#x_data_area').css('height',divH+'px');
}
});

こちらの記述に変更して、求めていた挙動になりました。

投稿2018/09/21 07:24

編集2018/09/21 07:32

moyassy

総合スコア13

arcrista_qg

2018/09/21 07:35

良かったです！

moyassy

2018/09/21 08:09

ありがとうございます！助かりました。

行動規範の内容に同意します

こういう感じでしょうか…？
これだと、ウィンドウリサイズ中でも処理が走りますので、完了のタイミングを取るなら別途処理が必要と思います。

javascript
1    $(window).on('resize', function(){
2      var wH = $('#example').innerHeight();
3      console.log('wH resize = [' + wH + ']');
4    });