jQuery3で、divの高さをブラウザの表示部分の高さに合わせます。
【手順】
１．『jQuery3.1.0のダウンロード方法』の手順で、jQuery3.1.0をダウンロードしておきます。
２．『index.html』というファイルを作成。
３．『index.html』を以下の様に入力。
<!doctype html>
<html>
<head>
<script src="jquery-3.1.0.min.js"></script>
<script>
$(function(){
var target = $('#target');
var windowHeight = (window.innerHeight || document.documentElement.clientHeight || 0);
target.height(windowHeight - target.offset().top);
});
</script>
</head>
<body style="margin: 0 0;">
ヘッダー
<div id="target" style="width: 200px; background-color: pink; overflow: auto;">
あああああ<br />
いいいいい<br />
ううううう<br />
えええええ<br />
おおおおお<br />
あああああ<br />
いいいいい<br />
ううううう<br />
えええええ<br />
おおおおお<br />
</div>
</body>
</html>
４．ダウンロードした『jquery-3.1.0.min.js』と『index.html』を同一ディレクトリに配置します。
５．『index.html』をブラウザで開きます。
６．以下の様に表示されれば成功です。
※divの高さ＞ブラウザの高さの場合、スクロールバーが表示される。
以上です。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。