:date: 2009-12-08 23:55:00 :tags: web ==================================================== sidebarとfooter付きLiquidページのHTML練習 ==================================================== Sphinx_ のデザインを参考に、sidebarとfooterのあるLiquidなWebページを作る練習をしてみました。 .. _Sphinx: http://sphinx.shibu.jp/ HTMLコーディングはそれなりにちゃんと出来る方(遅いけど)だとは思うのですが、Liquid(画面幅に合わせてサイト幅が広がるデザイン)なページにサイドバーとフッターがある場合に自然にレイアウトすることが出来ませんでした。 それっぽいレイアウトとしては、サイドバーを左にfloatさせて、本文をabsoluteでleft位置をサイドバーの幅の分指定するという方法です。この方法は画面幅に合わせて本文部分の幅が可変になるものの、absoluteを使ってしまっているので、本文部分の高さがサイドバーよりも長くなってもfooterの縦位置はサイドバーの直下に張り付いたままになってしまったわけです。って、文字だけで説明してもわからんなあ。 ま、フッターの位置は本文・サイドバーどちらかの長い方の下(=ページの最下端)に配置したいということです。 ということで、以下がうまくいったHTMLとCSSの例です。 .. code-block:: xml