道化師ラッパンのボヤキ

ちょっと前から気付いていたことがある。

何かのタイミングで、フッターがせり上がってしまう現象が起こるのである。main-boxのブロックを追加したのが原因なのかもしれない。こんな感じ。↓

 

いつも参考にさせてもらってるサイトがある。今回もお世話になった。

WEB工房きくちゃん

CSSテクニック>>フッターを画面の下に表示

 

スタイルシートの修正

フッターをコンテナで囲み、id=footにして、早速、スタイルシートに以下を記述。青字が追加分。

html{
    height: 100%;
}
body {
    font-size: 100%;
    height: 100%;
}
html>body {
    font-size: 12pt;
}
#main-box {
    margin-right: auto;
    margin-left: auto;
    border-left: 5px solid #ff9999;
    border-right: 5px solid #ff9999;
    height: 100%;
    width: 872px;
    text-align: center;
    min-height: 100%;
}
body > #main-box {
    height: auto;
}

/* フッタ */
#foot{
    border-left: 1px solid #cc00cc;
    border-right: 1px solid #cc00cc;
    background: #ffcc99;
    text-align: center;
    bottom:0px;
    height:42px;
}
.layout-one-column #footer,
.layout-three-column #footer,
.layout-three-column-right #footer,
.layout-two-column-left #footer,
.layout-two-column-right #footer,
.layout-one-column-liquid #footer {
    height: 42px;
    color: #333333;
    font-size: 12px;
    line-height: 3.5;
}

一応直ったけど、他に方法あるんかもしれん・・・。