div max-heightはjavascriptを使用して動的に設定されます

Question

マスターページとコンテンツページ（添付の画像を参照）を使用してWebアプリケーションを使用しています。私はコンテンツページの1つのdivの最大幅をブラウザのウィンドウサイズに動的に合わせる必要があります（スクロールせずにアプリケーション全体がページに残ります）。私はsloutionを見つけることができませんでした（または結果を複製できませんでした）だけhtmlとCSSを使用しています。だから私はjavascriptを使用してそれを行うことを考えています。しかし、問題は、私は決してそれを使用したので、私は本当にどのようにそれを行う手がかりがありませんです。私は本当に誰かが数分かかって、それを行う関数を書く場合appriciateだろう。私はそれを見て、ヘッダーの下端とフッターの上端の高さに差をつけ、検索バーとボタンバーの高さの値を差し引くべきです。

EDIT：そのコードを提供するためのmaxedisonへ 感謝。しかし、どうすれば使えますか？ ：D私は全然騒ぎです。私は、マスターページとコンテンツページを使用しているので、問題があります。そのコードはどこに置くのですか？

EDIT 2 - ANSWER：

私はjQueryの使用方法にさらに少し見て、もう少しここで検索し、私は解決策を見つけました。次回は、アプリケーションの開発を開始するときに、jQueryをボトムアップから使用します...それはいくつかのことを単純化するだけです。 :)

解決策：これはmaxedisonの提案と似ていますが、CSSで高さを設定して、固定値を追加してwindow.heightから差し引くだけです。 jQueryのを使用して

<script type='text/javascript'> 
    $(function() { 
     $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' }); 

     $(window).resize(function() { 
      $('.myStyle').css({ 'height': (($(window).height()) - 350) + 'px' }); 
     }); 
    }); 
</script> 

Answer 1

、それは次のようになります。

function resetHeight(){ 
    var newHeight = $(window).height() - $('.header').outerHeight() - $('.searchBar').outerHeight() - $('.buttons').outerHeight() - $('.footer').outerHeight(); 
    $('.content').height(newHeight); 
} 

$(function(){ 
    newHeight(); 

    $(window).resize(function(){ 
     resetHeight(); 
    }); 
}); 

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.