0

これはかなり簡単だと思いましたが、解決策を見つけることができませんでした。ブラウザ ウィンドウを埋める 2 つの div を含むレイアウトが必要です。それらは 100% 幅で、一方が他方の上に重なっています。下部の div の高さは固定である必要があり、上部の div は残りのスペースを埋めます。次の解決策を希望します。

  • CSS のみを使用する (Javascript を使用しない)
  • IE7+ と互換性がある (例: CSS calc なし)
  • div 間に重複がないこと
  • レイアウト内に収まらない場合は、上部の div のコンテンツを垂直方向にスクロールします

私は次のことを試しましたが、margin-bottom は効果がないように見えるため、2 つの div が重なっています (半透明の背景で示されているように)。

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body, html {
        height: 100%;   
    }
    #content {
        height: 100%;
        width: 100%;
        overflow: auto;
        background: rgba(255,0,0,0.5);
        margin-bottom: 40px;
    }
    #footer {
        width: 100%;
        height: 40px;
        position:absolute;
        bottom: 0;
        background: rgba(255,0,0,0.5);
    }
</style>
</head>
<body>
    <div id="content">
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>last line of content</p>
    </div>
    <div id="footer"></div>
</body>
</html>

JSFiddle

スティッキーフッターの解決策をいくつか見てきましたが、それらはすべて div が重なっているようです。これは見た目ほど難しいですか、それとも何か不足していますか? どんな洞察も大歓迎です！

4

3 に答える 3

0

フッターとコンテンツを に設定position: relative;し、margin-bottom:40px.

于 2013-09-24T03:08:18.580 に答える
0

スティッキー フッターは、スティッキー ヘッダーとほぼ同じです。

#footer を position:static に設定します。left:0px; を追加する必要がある場合があります。

margin-bottom の代わりに #content に padding-bottom:40px を使用し、次に box-sizing:border-box を設定します。ボーダーボックスには、合計サイズにパディング (およびボーダー、したがって名前) が含まれます。div はまだオーバーラップするため、レイヤー #footer tm with z-index:99; を使用します。および #content with z-index:-1; 。パディングはコンテンツの重複を防ぎ、#footer の背景は残りを隠します。
ボーダーボックスがコンテンツにうるさい場合は、内側の div にボーダーボックスを追加して、パディングを再度調整してください。

于 2013-09-24T03:46:33.420 に答える