サイトの構成を２カラムにするのはfloatを使えば簡単にできますよね。

先日、何も考えずに普通に２カラムを作成していて、あることに気付きました。

高さが固定のページでは問題ないですが、高さが変動するページの場合サイドバーが短くなってしまうということに。

例えばサイドバーの高さが300pxだとすると、メインの高さが300pxより低い場合は問題ないのですが、300pxより高くなるとサイドバーの高さが足りなくなるんです。

もちろん最初からメインの高さが５００pxだとわかっているなら、サイドバーも500pxにするだけなんですが、ブログページなんかはブログの記事によってその都度高さが変動してしまいますよね。

そこでサイドバーの長さをメインに合わせる必要が出てくるんです。

方法としては、
サイドバーに大きな余白をとって、余分な余白は隠してしまう方法です。

具体的には、サイドバーに下の２行を追加して

padding-bottom: 10000px;
margin-bottom: -10000px;

親要素であるcontainerに

overflow: hidden;

を追加するだけです。

例えばこんな構成の場合

HTML

<header></header>
<div id="container">
<div id="main">main</div>
<div id="sidebar">sidebar</div>
</div>
<footer></footer>

CSS

        #container {
            width: 100%;
            overflow: hidden;
        }
        #main {
            width: 70%;
            min-height: 500px;
            float: left;
        }
        #sidebar {
            width: 30%;
            min-height: 300px;
            float: right;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        

WordPressのアーカイブページ等でサイドバーに背景をつける場合は覚えておかないとですね。

この方法はこちらのブログを参考にさせていただきました。

CSSでサイドとメインの高さを揃える方法｜Junonet