AndyHin と同じ問題があります ( CSS HTML - DIV の高さが残りのスペースを埋めます) が、フセインが言ったときに JavaScript を挿入する場所がわかりません。私は js での記述にまったく慣れていないことを認めなければなりません。
以下のように head タグの間に含めてみましたが、jquery に挿入しようとしても無駄でした。
<head>
<script>
Hussein's answer
</script>
</head>
AndyHin と同じ問題があります ( CSS HTML - DIV の高さが残りのスペースを埋めます) が、フセインが言ったときに JavaScript を挿入する場所がわかりません。私は js での記述にまったく慣れていないことを認めなければなりません。
以下のように head タグの間に含めてみましたが、jquery に挿入しようとしても無駄でした。
<head>
<script>
Hussein's answer
</script>
</head>
ページ上の要素に依存するため、DOM の構築が完了するまでスクリプトの実行を遅らせる必要があります (必要な要素を実際に選択できるようにするため)。そのための 2 つのオプションがあります。
<script>
タグを HTML ドキュメントの本文の最後に配置します。
<script>
// code here
</script>
</body>
タグをタグ内(または実際には重要ではないため、<script>
タグ内の任意の場所) に配置し、イベント ハンドラーを使用します。<head>
<body>
DOM ready
<script>
$(document).ready(function() {
// code here
});
</script>
本文の終了タグ ( )の直前に</body>
配置するか (最善の解決策)、スクリプトのすべてのコードを
$(function() { Hussein's answer });
ドキュメントの最後にスクリプトを追加したり、 を使用したりしない場合、DOM の$(document).ready()
準備が整う前にコードが実行されるため、JavaScript は DOM 要素を見つけて何もしません (最善の場合)。
$(function() {}) (の短縮形$(document).ready()
)に関する記事はこちら
head 部分に次の参照を追加します
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
ページのどこにでも挿入できます。
<script>
$(document).ready(function(){
var one = $('#col_1').height(),
two = $('#col_2').height(),
remaining_height = parseInt($(window).height() - one - two);
$('#col_3').height(remaining_height);
});
<script>