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

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

  • このトピックには10件の返信、2人の参加者があり、最後にメロンにより5年、 3ヶ月前に更新されました。
10件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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さんありがとうございます。

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

10件の返信スレッドを表示中
返信先: body-inの高さをmain、sidebarの縦に長いほうに合わせたいで#53214に返信
あなたの情報:




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