0

メイン コンテナに位置絶対要素がある場合、フッターがページの下部にくっつくのに問題があります。ここにデモンストレーションするフィドルがあります。

<div class="content-wraper">
    <div class="side-nav"></div>
</div>

<div class="footer"></div>​

.content-wraper {
    background-color:blue;
    min-height:100px;
    position:relative;
    width:500px;
}

.side-nav {
    background-color:red;
    height:3000px;
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
}

.footer {
    background-color:black;
    position:absolute;
    bottom:0px;
    width:200px;
    height:50px;
}
4

2 に答える 2

5

に変更position: absolute;_.footerposition: fixed;

更新されたフィドル

アップデート

side-navjQueryを使用してフッターが常に絶対位置より下になるように修正するには、次のようにします。

$(".footer").css("top", $(".side-nav").height());

フィドルの例

于 2012-11-27T10:25:55.427 に答える
1

絶対位置とは、コンテンツサイズではなくウィンドウサイズを指すため、コンテンツがウィンドウよりも大きい場合、目的の効果は得られません。

別のアプローチを試してください：

スティッキーフッター

于 2012-11-27T10:26:25.930 に答える