ベストセラー人気 WordPress テーマTop 30 詳細

DIVの幅をウィンドウに合わせて拡張させる方法(CSS / jQuery)

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

サブDIV(Child DIV)をページの幅に合わせて拡張させる方法について簡単に説明します。 例えば、次のようなHTMLコードがあるとき、

<div class="container" style="width: 960px">
<div class="child_div" style="width: 100%; margin: 0 auto;">
내용
</div>
</div>

ウィンドウの幅が960pxよりも大きい場合に child_div クラス要素がウィンドウの幅に合わせて拡張されるようにしたい場合は、まず次のような形式でCSSコードを使用します。

.container {

position: relative;

}

.child_div {
position:absolute;
left:0;
right:0;
}
// Source: Stckoverflow

あるいは、次のようなコードを使ってみてください。

.child_div {
position: absolute;
left: 0;
width: 100%;
}

jQueryを使って実装する場合は、次のスクリプトを使用することができます。

$(".child_div").width($(window).width());

$(window).width()ブラウザのViewportの幅を返します。 $( "div")。width()は幅をを返します。 参考までに $(selector).width(value)は、幅を設定します(参照).

width in jQuery

別の方法として、次のようなスクリプトを考えてみることができます。

window.onresize = function(event) {
var bWidth = $("body").width();
$(".child_div").width(bWidth);
}
Source: Stackoverflow

このスクリプトは、bodyの幅を受けて来て.child_divの幅に設定します。 jQueryの メソッドは、 ここを参照してください。

参照:

メモ:



コメントを残す

コメント