Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › body-inの高さをmain、sidebarの縦に長いほうに合わせたい
- このトピックには10件の返信、2人の参加者があり、最後にメロンにより5年、 3ヶ月前に更新されました。
-
投稿者投稿
-
-
ysゲスト
body-inにsidebarと同じbackground-colorを設定し、その高さをmain、sidebarの高さが大きいほうに合わせることで
sidebarの見せかけの高さをmainと合わせようと考えています(sidebarのほうが長くてmainの下が塗色されても構いません)。
(サイトはこちら。)しかし現状当サイトのbody-inはheightは小さいほうに合わせており、その分footerがせり出ています。
なのでこれを、上記のことを実現できるように変えたいです。補足として、最初はsidebarの高さをmainに合わせようと考えたのですが、
「サイドバーエリアの延長について」
を読んでも高さの取得か、あるいはその反映手段に失敗し(<div class=”ラッパーのクラス名”>で囲むだけは間違いなくできましたが)、技術不足ということで別の方法を取ることにしました。 -
Akiraゲスト
ちょっとしたCSSテクニックで可能です。
@media screen and (min-width:1110px){ #body-in{ overflow:hidden; } #sidebar{ padding-bottom:10000px; margin-bottom:-10000px; } }
一応モバイル端末で変なことにならないように、メディアクエリを用いています。
メインカラムの高さがものすごく高くなる場合には、#sidebarに指定している10000pxと-10000pxの値をさらに大きくします。
また、この方法であれば、#body-inのbackground:#efefefは不要になるかと思います。 -
Akiraゲスト
追記致します。
メインカラムよりサイドバーが高くなる場合には、現状通り#body-inのbackground:#efefefは必要です。
-
ysゲスト
あまりの大胆な発想に目からウロコでした。
長くしてhiddenで隠すんですね。ずっと悪戦苦闘していたことだったのですが、Akira様のおかげで無事解決できました。
本当にありがとうございました。 -
わいひらキーマスター
とりあえず、header.phpにあるdiv#body-inに対して以下のようにcfクラスをつけるというのもありかもしれません。
<div id="body-in" class="cf">
とりあえず、特に問題はなさそうなので、次のバージョンで上記のように変更はしようと思います。
当サイトは既に適用させてみました。 -
ysゲスト
わいひらさんの方も試させて頂きましたところ、
こちらはmainのほうが短いときもsidebarが消えませんでした。色々と勉強させてもらいました。
ありがとうございます! -
Akiraゲスト
わいひらさんありがとうございます。
より簡単にカスタマイズができるようになります。 -
メロンゲスト
ワードプレス初心者です。
今回、mainとsidebarの長さを揃える方法を探していたところこのページにたどり着きました。
Akiraさんの#53211のやり方でmainとsidebarの長さを揃えることに成功しました。
ですが、目次プラグイン(Table of Contents Plus)を入れたところ、PCで見ると不具合があるようです。
目次をクリックすると移動するのですが、上にスクロールできなくなってしまいます。
また、下の方も長い空白ができるようになりました。
ちなみにページを再読み込みすると元に戻ります。
(グーグルクロームで観覧)
この問題を解決する対策をご教授ください。
よろしくお願いします。
-
わいひらキーマスター
申し訳ないですが、サポート対象外のものにもあるように、今回のような独自カスタマイズと、プラグインの合わせ技となるような不具合はサポートの対象外とさせていただいています。
無料テーマのもので、そこまで自前でカスタマイズして、プラグインをインストールして、不具合を再現させるという時間は取れないので。 -
Akiraゲスト
1 年半前の私は、なぜトリッキーで汎用性のない方法を提案したんだろう…。理由を思い出せない。
main と sidebar の高さを合わせる方法として、今日の私はこう提案します。
@media screen and (min-width: 1110px) { #body-in { display: flex; } main { margin-right: 30px; } #sidebar { margin: 0; } }
Table of Contents Plus は使っていないので、上手くいくかは分かりません。
-
メロンゲスト
Akiraさんありがとうございます。
参考にさせていただきます。
-
-
投稿者投稿