jQuery:heightLine.jsでborderが消える

heightLine.jsで下に引いていた罫線が消えてしまったのでその解決法をメモ。

01. borerが消える現象

プラグイン『heightLine.js』は、個別か親要素に任意のクラスを設置すると、横並びのコンテンツの高さを揃えてくれる便利なプラグインです。しかし、設定したborder-bottom分高さが出てしまったので解決方法を調べてみました。

下のボーダーが消えるサンプル

下のボーダーが消える

02. box-sizingで解決する

コンテンツに下記のCSSを追加します。

CSS
.該当クラス {
    box-sizing: content-box;
}

全体にbox-sizing: border-box;を指定してしまっていたのが原因だったようです。border要素もコンテンツの高さに含むように設定したら直りました。

heightLine.jsで高さがうまく揃わない時
JavaScriptやHTMLの技術情報、ガジェットやクラウドファンディングの情報、サッカーなど、個人の雑記。
https://hcondo2000.blogspot.jp/2015/10/heightlinejs.html
URLをコピーする