ページの内容が短くてもウィンドウ下部にフッターを固定する方法
ページの内容が短い時に、フッターまで上のほうにあがってしまってみっともないことがある。それの回避方法。
html { position: relative; min-height: 100%; } #footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; }
html
に対しmin-height: 100%;
とposition: relative;
を設定して、#footer
にposition: absolute;
で固定する。
こうすると内容が短くても長くても、フッターをページ下部に固定することができる。