CSSでステッカーフッターレイアウトを使用する方法-CSSチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-21 09:53:05

オリジナル

2321 人が閲覧しました

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

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

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

// html
<body>
    <p id="sticker">
        <p class="sticker-con">我是内容</p>
    </p>
    <p class="footer">我是脚</p>
</body>

ログイン後にコピー

// 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. ネストレベルが非常に深く、パーセンテージ高さを上位レベルから直接継承できません。

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

   <body>
        <p id="wrapper">
            <p id="sticker">
                <p class="sticker-con">我是内容</p>
            </p>
            <p class="footer">我是脚</p>
        </p>
    </body>

ログイン後にコピー

    .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获取
    <body>
        <p id="sticker">
            <p class="sticker-con">我是内容</p>
        </p>
        <p class="footer">我是脚</p>
    </body>
    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 サイトの他の関連記事を参照してください。