読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

floatで寄せた要素を親要素の高さに合わせる方法

プログラミング

floatで寄せた要素を親要素の高さに合わせたいと思って、はまってしまったので共有します。


そもそもfloatってなに?





floatとは要素のボックスを浮かせることによって左や右に移動させることです。floatさせた要素にはwidthをつけなければいけません。


ではサイドバーを親要素の高さいっぱいに表示できるようにしてみます。



gist7905003



このようなときイメージときにはこんなサイト
f:id:inagex:20131211125858p:plain


ここでcontentクラスの高さが仮に900pxでかつコンテンツが増えていくごとに増えるとします。



サイドバーもこれに合わせて高さが変わってほしい。(背景が違う色であればこっちのほうが望ましい)


footerクラスにはclear:both;をしてあります。


sideクラスをheightを100%にするとブラウザの画面いっぱいの高さになってしまい、しかもfooterまでもsideクラスに隠れてしまいます。


かといってheightを900pxなどに固定すると、親要素であるcontentクラスの高さが増加したときに途切れてしまいます。


かといってjqueryなどのライブラリは入れるのが面倒…


そんなときの解決策です。


まず親要素であるcontentクラスに

.content{
overflow:hidden;
}

をあてます。

親要素にすることは以上です。

そして

.side{
padding-bottom: 32768px;
margin-bottom: -32768px;
}

をあてるとfloatした要素が親要素に高さにそろえることができました。