CSSでステッカーフッターレイアウトを使用する方法

今回は、CSS でステッカー フッター レイアウトを使用する方法と、CSS でステッカー フッター レイアウトを使用する際の 注意事項 について説明します。実際のケースを見てみましょう。

Web デザインにおいて、スティッキー フッター デザインは、ほとんどの人が一度は経験したことがある最も古く、最も一般的な効果の 1 つです。これは次のように要約できます。ページのコンテンツが十分な長さでない場合、フッター ブロックはウィンドウの下部に貼り付けられます。コンテンツが十分な長さの場合、フッター ブロックはコンテンツによって押し下げられます。この効果は遍在していて人気があるだけでなく、一見簡単に達成できます。しかし、実際の導入には予想以上に時間がかかりました。さらに、CSS 2.1 のソリューションでは、ほとんどの場合、フッターの高さが固定されています。これは非常に脆弱であり、実現可能であることはほとんどありません。実際、この効果を実現するには複雑すぎて、特定のタグといくつかのハック方法を追加する必要もあります。 CSS2.1 にはいくつかの制限がありますが、最新の CSS を使用すると、この効果をさらに向上させることができます。どうすればよいでしょうか?

1. ネストレベルは深くなく、本体幅: 100%、高さ: 100% から直接継承できます。

// html

    <p>
        </p><p>我是内容</p>
    
    <p>我是脚</p>

// css
html,body{
    width:100%;
    height:100%;
}
#sticker{
    width:100%;
    min-height:100%;
}
.sticker-con{
    padding-bottom:40px;    // 40px 为 footer 本身高度
}
.footer{
    margin-top:-40px;  // 40px 为 footer 本身高度
}

2. ネストレベルが非常に深く、パーセンテージ高さを上位レベルから直接継承できません。

最初の方法: 必要なステッカーフッターのラッパーを作成します

   
        <p>
            </p><p>
                </p><p>我是内容</p>
            
            <p>我是脚</p>
        
    

    .wrapper{
        position:fixed;  // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了
        overflow:auto;   // 当高度超过 100% ;时产生滚动条
        width:100%;
        height:100%;     // 继承自 body
    }
    // wrapper 内部包裹的结构，就如上所示了，css样式也一样

3. 高さがパーセンテージで取得できない場合は、強力なフレックスレイアウト flex-direction:column

を通じて取得することもできます。

ラッパーコンテナを表示します: flex; flex-direction:column

sticker: flex:1; フッターを除く残りのスペースを占有します

    //css样式同第一种， 只是 sticker 的 min-height 用css获取
    
        <p>
            </p><p>我是内容</p>
        
        <p>我是脚</p>
    
    var sticker = document.querySelector('#sticker');
    var h = document.body.clientHeight;
    sticker.style.minHeight = h - 44 + 'px';
    //这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height:

この記事の事例を読んだ後は、この方法を習得したと思います。 、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

フォトウォールで3D効果を実現するための純粋なCSS

ファンパターンを描画するためのCSS

以上がCSSでステッカーフッターレイアウトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。