イコールハイト再考

CSSによるイコールハイトレイアウト再考

レインドロップステーマの最近の問題の一つに、サイドバーの高さがプラグインやoEmbedメディアの影響を受けて、イコールハイトサイドバー高さが不足する事が散見されるようになっています。

最近では、「イコールハイトレイアウト」なんて、死語になっているのかもしれませんが、これまで、jQueryで行ってきた高さの調整を、CSSで出来ないか、再度、検討をし始めました。

今風には、flex使えばOKという話題なのですが、もともとフロート構造のレイアウトのテーマのためちょっと難儀をしています。

また、しばらくそういう事を考えていなかったので、復習をしました。

最初に目を付けたのが、「float layout equal height」で、フロートレイアウトでのイコールハイトの勘所が書いてあります。

次に、3colでの最初の試作が、「test」です。

この試作は、3カラム表示は出来ているのですが、HTMLの構造に大きな問題がありました。

投稿内のスタイルなどと異なり、ページレイアウトを書く場合には、メインコンテンツの位置関係が重要な要素の一つになります。この試作の場合メインコンテンツ（投稿）用のソースが、サイドバーの読み込みの後になってしまい　HTMLの文書構造としては、「なにそれ」的なものになってしまいました。

もう一度、考え直して　書き直したのが　以下のhtmlです。

もっと考え直す必要があるかもしれません。

古い形のスタイルを必要とする人のために、恥を書き残しておきます。

左サイドバーを右に右サイドバーを左に

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CSS note