graffiti on the web Twitter Bootstrapを使用して、レスポンシブなウェブサイトを制作していたのですが、iPhoneで縦画面、横画面での表示を繰り返すと画面からはみ出してしまう（拡大表示した時のように画面内にサイトが収まっていない）現象に悩まされました。
もちろん、縦でも横でも画面横幅ピッタリにサイトが表示されるのが理想なので、調べてみました。
今回使用していたのは、Bootstrap v3.…
jQuery Auto Height とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。
3カラムのデザインで高さを調整したいなんて言う場合も多いのではないでしょうか。
目次
サンプル
複数のボックスの高さを最大値にそろえるjQueryプラグインファイルのダウンロード
Downloads – jquery-auto-height – Google Code設置方法
以下のソースをhead内にそのまま貼付けます。<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryAutoHeight.js"></script>
<script type="text/javascript">
jQuery(function(jQuery){
jQuery(揃えたいセレクタ).autoHeight();
});
</script>
例として、左カラム、センターカラム、右カラムの３つ全てを揃えたい場合は、各カラムを以下のように設定します。今回は揃えたいものに「.column」というクラスを割り当てます。
<div id="leftColumn" <strong>class="column"</strong>></div> <div id="centerColumn" <strong>class="column"</strong>></div> <div id="rightColumn" <strong>class="column"</strong>></div>上記のhtmlに合わせて、スクリプトのセレクタを設定します。今回は「.column」です。 これで設定は完了です。 他にも、細かい設定が可能になっているので、今回と違う形でボックスの高さを揃えたい場合なんかは、以下のサイトさんなんかで勉強してみるといいと思います。
参考サイト
http://www.tinybeans.net/blog/download/jquery-plugin/jquery-auto-height.html
この投稿へのコメント
コメントはまだありません。