要素の高さを画面100%に調整する
要素の高さが画面100%に足りないときにフッターの位置がおかしくなるのを防ぐための調整です。jQueryとCSSの2パターン掲載しています。
まずはjQuery。
画面内の要素のうち、高さ調整したい要素(targetItem、1要素のみ)と高さ調整しない要素(staticItem、配列指定可)を指定して使います。
マークアップ構造が複雑だったり、スタイル調整のためにマークアップを変更できない場合に使いやすいです。
jQuery
(function ($) {
//調整したい要素
const targetItem = $('.hogeA');
//調整しない要素(配列。1要素だけ指定も可)
const staticItem = Array(
$('.hogeB'),
$('.hogeC')
);
const minHeightResize = (targetItem, staticItem) => {
if (targetItem.length > 0) {
const winH = $(window).height();
const staticItems = (!Array.isArray(staticItem)) ? new Array(staticItem) : staticItem;
const staticHarr = staticItems.map(obj => {
if (obj.length > 0) {
return obj.outerHeight(true);
}
});
const staticH = staticHarr.reduce((t, d) => { return t + d });
targetItem.css({ 'min-height' : (winH - staticH) + 'px' });
}
}
$(window).on('load resize', function () {
minHeightResize(targetItem, staticItem);
});
})(jQuery);
続いてCSS。
下準備として、HTML側でマークアップ構造の調整が必要です。
HTML
<div class="wrap">
<div class="hogeB">
...ヘッダーなど
</div>
<div class="hogeA">
...高さ調整したい要素
</div>
<div class="hogeC">
...フッターなど
</div>
</div>
クラス名はjQueryでの調整の要素と合わせています。
このHTMLに対してスタイル設定します。
CSS
.wrap {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.hogeA {
flex: 1 1 auto;
}
[flex: 1 1 auto;]は、[flex-grow: 1;]と同じ意味です。flex-shrink、flex-basisと合わせて一括指定できるショートハンド。
サイトによってはHTML側の調整が難しいかもしれませんが、この構造が作れると記述がかなりすっきりします。
高さを取得する必要もなくなるので、構造さえ保てればスタイルの調整が不要ですし、読み込み時にjQueryでの処理が走ることも避けられます。
COMMENT FORM