body-inの高さをmain、sidebarの縦に長いほうに合わせたい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など body-inの高さをmain、sidebarの縦に長いほうに合わせたい

このトピックには10件の返信が含まれ、2人の参加者がいます。8 ヶ月、 4 週間前 メロン さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #53209 返信

    ys

    body-inにsidebarと同じbackground-colorを設定し、その高さをmain、sidebarの高さが大きいほうに合わせることで
    sidebarの見せかけの高さをmainと合わせようと考えています(sidebarのほうが長くてmainの下が塗色されても構いません)。
    (サイトはこちら。)

    しかし現状当サイトのbody-inはheightは小さいほうに合わせており、その分footerがせり出ています。
    なのでこれを、上記のことを実現できるように変えたいです。

    補足として、最初はsidebarの高さをmainに合わせようと考えたのですが、
    サイドバーエリアの延長について
    を読んでも高さの取得か、あるいはその反映手段に失敗し(<div class=”ラッパーのクラス名”>で囲むだけは間違いなくできましたが)、技術不足ということで別の方法を取ることにしました。

  • #53211 返信

    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は不要になるかと思います。

  • #53212 返信

    Akira

    追記致します。

    メインカラムよりサイドバーが高くなる場合には、現状通り#body-inのbackground:#efefefは必要です。

  • #53213 返信

    ys

    あまりの大胆な発想に目からウロコでした。
    長くしてhiddenで隠すんですね。

    ずっと悪戦苦闘していたことだったのですが、Akira様のおかげで無事解決できました。
    本当にありがとうございました。

  • #53214 返信
    わいひら
    わいひら
    キーマスター

    とりあえず、header.phpにあるdiv#body-inに対して以下のようにcfクラスをつけるというのもありかもしれません。
    <div id="body-in" class="cf">
    とりあえず、特に問題はなさそうなので、次のバージョンで上記のように変更はしようと思います。
    当サイトは既に適用させてみました。

  • #53215 返信

    ys

    わいひらさんの方も試させて頂きましたところ、
    こちらはmainのほうが短いときもsidebarが消えませんでした。

    色々と勉強させてもらいました。
    ありがとうございます!

  • #53216 返信

    Akira

    わいひらさんありがとうございます。
    より簡単にカスタマイズができるようになります。

  • #61206 返信

    メロン

    ワードプレス初心者です。

    今回、mainとsidebarの長さを揃える方法を探していたところこのページにたどり着きました。

    Akiraさんの#53211のやり方でmainとsidebarの長さを揃えることに成功しました。

    ですが、目次プラグイン(Table of Contents Plus)を入れたところ、PCで見ると不具合があるようです。

    目次をクリックすると移動するのですが、上にスクロールできなくなってしまいます。

    また、下の方も長い空白ができるようになりました。

    ちなみにページを再読み込みすると元に戻ります。

    (グーグルクロームで観覧)

    この問題を解決する対策をご教授ください。

    よろしくお願いします。

  • #61207 返信
    わいひら
    わいひら
    キーマスター

    申し訳ないですが、サポート対象外のものにもあるように、今回のような独自カスタマイズと、プラグインの合わせ技となるような不具合はサポートの対象外とさせていただいています。
    無料テーマのもので、そこまで自前でカスタマイズして、プラグインをインストールして、不具合を再現させるという時間は取れないので。

  • #61208 返信

    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 は使っていないので、上手くいくかは分かりません。

  • #61218 返信

    メロン

    Akiraさんありがとうございます。

    参考にさせていただきます。

返信先: body-inの高さをmain、sidebarの縦に長いほうに合わせたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)