0

テンプレートを設定html,body { height: 100% }すると、奇妙なことが起こります。ローカルホストでのみ発生するため、説明が難しく、フィドルで問題を再現することもできません。ページを保存してからそのページを実行すると、問題はなくなりました。

これは私の問題です：

footerコンテンツがページを埋めない場合はページの下部にとどまろうとしていますが、コンテンツが y に沿ってページからはみ出す場合、フッターはコンテンツの下部にある必要があります。つまり、通常の要素のように動作します。

私はこれをやってみました：

html, body {
    height: 100%;
}

body {
    position: relative;
}

footer {
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
}

これは機能しますが、少し遅れます。ページを更新すると (コンテンツがオーバーフローしていない場合)、フッターはページの下部ではなくコンテンツの最後にあります。しかし、約 0.5 秒後に、フッターが一番下に移動します。

ページの下部に CSS スイッチャー ボタンがあり、それを使用すると、フッターにこの奇妙な動作が表示されません。したがって、これは CSS のせいではないと思います。また、保存したページを使用してページをctrl+s保存してから実行しても、この問題は発生しないため、おそらく Django が原因です。

ここに私のコードがあります:フィドルとここにその保存されたページの RAR があります:ドロップボックス

4

1 に答える 1

0

コンテナ div に min-height を適用 && フッターの高さに一致する body div に padding-bottom を適用します。

jsフィドル

<div id="container">
    <div id="header"></div>
    <div id="body">
        <!-- content here -->

    </div>
    <div id="footer"></div>
</div>

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
于 2013-08-02T16:46:24.900 に答える