フッターは、ページの下部に「プッシュ」するのに十分なコンテンツが上にある場合(http://v3.edharrisondesign.com/)、必要な場所に配置されますが、コンテンツがないと、上に配置されすぎます(http: //v3.edharrisondesign.com/about/)。
なぜ何かアイデアはありますか?
フッターは、ページの下部に「プッシュ」するのに十分なコンテンツが上にある場合(http://v3.edharrisondesign.com/)、必要な場所に配置されますが、コンテンツがないと、上に配置されすぎます(http: //v3.edharrisondesign.com/about/)。
なぜ何かアイデアはありますか?
グーグルでスティッキーフッターを検索すると、これはいくつかの解決策でよくある問題であることがわかります。とにかく、私はあなたのサイトを調べました、そしてあなたがする必要があることはここにあります:
1)html's
ルールセットに、次を追加します。
height: 100%;
2)body
のルールセット:
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
min-height: 100%;
padding-bottom: 80px; /* same as footer's height */
3)footer
:
position: absolute;
bottom: 0; /* you already have this */
このソリューションは、ボックスサイズ設定プロパティを利用します。古いブラウザをサポートすることが要件である場合、それは機能しません-そのためにhtmlに追加の要素が必要になります(これがあなたが望むものであるかどうか私に知らせてください)。
見栄えの良いサイト、ところで!
ie7/8/9およびその他のメインブラウザで動作します。IE6はそれを無視します。
ジョンが言っていることは、ヘッダーとフッターの間に最小の高さのコンテナーが必要であり、ブラウザーに2つの間に必要なピクセル数を設定できるようにする必要があるということです。ホームページは「サムネイルコンティナー」ですが、内部ページではコンテンツがまったくないようです。いずれの方法でも(サムネイルコンテナを内部ページに配置するか、新しいdivを作成するかにかかわらず)、各ページにコンテンツを適切に作成し、必要な最小の高さにします。