ホームページ > 記事 > ウェブフロントエンド > CSSでステッカーフッターレイアウトを使用する方法
CSSでステッカーフッターレイアウトを使用する方法
- php中世界最好的语言オリジナル
- 2018-03-21 09:53:052218ブラウズ
今回は、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:columnsticker: 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でステッカーフッターレイアウトを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。