5

高さがブラウザーの幅に依存する可能性があるスティッキーフッターを持つソリューションを探しています。

流動的なデザインの粘着性のあるフッターは、それほど簡単ではありません。スティッキー フッターを実装するためのヒント、ディスカッション、解決策を見つけました。ただし、これらはすべて、固定された既知のフッターの高さに依存しています。私の場合、フッターの高さにはテキストが含まれ、行数は画面の幅に依存します。

あらゆる種類のメディア クエリを作成し、いくつかの作業を行うよりも、画面の幅が変化したときにスティッキー フッターが自動的に適応するクリーンな CSS ソリューションを好みます。

究極の答えを持っている人はいますか？

4

2 に答える 2

0

次のようなことを試してください：

http://jsfiddle.net/6BQWE/2/

スティッキー フッターの高さは、コンテナーの高さに対する相対値であり、パーセンテージで表されます。

#sticky_footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:10%;
    background:red;
    text-align:center;
}

メディアクエリを使用してテキストのマージン/パディングを整理する必要がある場合がありますが、フッターのサイズはそれらがなくても動的になります。

于 2013-06-03T17:29:05.393 に答える