jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法｜BLACKFLAG
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
jQueryで取得する「○○の高さ」について
$(document).height();//最低のブラウザ領域 コンテンツの高さ総計 ＜ ブラウザ可視領域 なら ブラウザ可視領域 コンテンツの高さ総計 ＞ ブラウザ可視領域 なら コンテンツの高さ総計 $('html').height();//コンテンツの高さ総計 なので、サイドバーとかでコンテンツが少なくても多くても、常に最下部まで高さを持ってきたい場合は var doc_height = 0; var html_height = $('html').height(); $(window).on("load resize", function(){ doc_height = $(document).height(); if(doc_height >= html_height) $('#sidebar').height(doc_height); }); って書いて、高さを取得 → サイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
