Javascriptのサイズ変更機能

Question

画面サイズに合わせて要素のサイズを変更するJavaScriptに問題があります。私は単純なクラスをcssに同じ機能を持つこのコードを翻訳したいと思います。

$(window).resize(function(){ // On resize 
    $('item2').css({'height':(($(window).height()))+'px'}); 
}); 

私は

.test2 { 
    height: 100%; 
} 

しかしdoesnの `tの仕事を試してみました - 私は、スクリプト部分の要素が（フルスクリーンの高さ）を希望されない場合は削除します。スクリプトを使用して

問題は、それが使用しない限り、メディアクエリを変更することがcan`tマークアップするスタイルを、実装することです！重要...

Answer 1

あなたは画面の高さに等しいheightを持つ要素を持っているために、あなたはその要素にposition:fixedを設定し、height:100%を追加する必要がいずれか、または、ドキュメントフローを維持したいならば、あなたも設定する必要がありますドキュメントの高さを100％に設定し、子要素の親も100％の高さにする必要があります。

明らかに最初のアプローチですが、そのオプションは自然なドキュメントフローから要素を引き出します。

.test2{ 
    position:fixed; 
    top:0; 
    left:0; 
    height:100%; 
    z-index:2; 
} 

$(window).resize(function(){ 
    $('item2').addClass('test2); 
}); 

この機能は、すべてのサイズ変更イベントで実行されることに注意してください。これはパフォーマンスが高くなります。 https://davidwalsh.name/javascript-debounce-function

Answer 2

item2あなたがセレクタに.を追加する必要があり、その後classある場合。

$(window).resize(function(){ // On resize 
    //$('.item2').css({'height':(($(window).height()))+'px'}); 
    $('.item2').height($(window).height()); 
});