1

コンテナと同じ高さで、流体の幅もある3つのリンクを含む、下に揃えられた流体の幅のスティッキーフッターを作成しようとしています。

このフッターのトップアラインバージョンを作成しました。リンクはコンテナの高さ全体ではありません。コンテナの底をゼロに設定すると壊れます。私はこれのコードをここに置きました：http： //jsfiddle.net/bHJR3/1/

コンテナの下端がウィンドウの下部と同じ高さになり、リンクがコンテナと同じ高さになるように、所有しているものを変更するにはどうすればよいですか？

私はjqueryを介してこれを行う方法を知っていますが、可能な限りjsを避けようとしています。

助けてくれてありがとう。

編集：これは、誰かがそれを見たい場合に答えがない場合に私が思いついたjqueryソリューションです。http://jsfiddle.net/bHJR3/2/

4

1 に答える 1

2

bottom: 0あなたが着手したときにそれが壊れた理由#footerは、中のすべてが#footer持っていたからposition: absoluteです。絶対的に配置された要素は、ドキュメントフロー内のスペースを占有せず、親要素が拡張されてそれらを含むことはありません。高さをに設定すると、#footerこれが解決されます。タグを設定height: 100%するaと、親要素を基準にしてサイズが変更されます。保持することはできdiv.contentますが、設定する必要もありますheight: 100%。

次のCSSを次の場所に追加します#footer。

bottom: 0;
height: 90px;

次のCSSを次の場所に追加しますA。

height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */

を削除しdiv.contentます。ここでは必要ないようです。

編集

次のCSSを追加/変更することで、フッターを中央に配置できます#footer。

width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */

編集

ウィンドウ幅が640px未満の場合は、max-widthとメディアクエリを使用してフッターのスタイルを変更できます。

#footer {
    position: fixed;
    width: 100%;
    max-width: 640px;
    height: 114px;
    bottom:0;
    left: 50%;
    margin-left: -320px;
}

@media only screen and (max-width: 640px) {
    #footer {
        margin-left: auto;
        left: 0;
    }
}
于 2012-05-21T21:15:11.380 に答える