Heim > Artikel > Web-Frontend > So verwenden Sie das Sticker-Fußzeilen-Layout in CSS
So verwenden Sie das Sticker-Fußzeilen-Layout in CSS
- php中世界最好的语言Original
- 2018-03-21 09:53:052290Durchsuche
Dieses Mal zeige ich Ihnen, wie Sie das Sticker-Fußzeilen-Layout in CSS verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des Sticker-Fußzeilen-Layouts in CSS gelten. Hier ist ein praktischer Fall, nehmen wir einen sehen.
Im Webdesign ist das Design klebriger Fußzeilen einer der ältesten und häufigsten Effekte, die die meisten Menschen schon einmal erlebt haben. Es lässt sich wie folgt zusammenfassen: Wenn der Seiteninhalt nicht lang genug ist, wird der Fußzeilenblock am unteren Rand des Fensters eingefügt. Wenn der Inhalt lang genug ist, wird der Fußzeilenblock durch den Inhalt nach unten verschoben. Dieser Effekt ist nicht nur allgegenwärtig und beliebt, sondern auch täuschend einfach zu erreichen. Doch die Umsetzung dauerte tatsächlich länger als erwartet. Darüber hinaus legen Lösungen in CSS 2.1 fast immer eine feste Höhe für die Fußzeile fest. Dies ist sehr fragil und selten machbar. Tatsächlich ist es zu kompliziert, diesen Effekt zu erzielen, und es erfordert außerdem das Hinzufügen spezifischer Tags und einige Hack-Methoden. Es gibt einige Einschränkungen in CSS2.1, aber mit modernem CSS können wir diesen Effekt verbessern. Wie macht man das?
1. Die Verschachtelungsebene ist nicht tief und kann direkt von der Körperbreite übernommen werden:
// 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 tief und kann nicht sein
Die erste Methode, um die prozentuale Höhe direkt vom Vorgesetzten zu erben: Erstellen Sie einen Wrapper für die erforderliche Aufkleberfußzeile
<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 Wenn die Höhe nicht möglich ist kann auch prozentual abgerufen werden. Kann über js
//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:
4 abgerufen werden >
Aufkleber: flex:1; Nimmt den verbleibenden Platz außer der Fußzeile einIch glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Weitere verwandte Artikel auf der chinesischen PHP-Website!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>sticker footer</title>
</head>
<style>
html,body{
width: 100%;
height: 100%;
background-color: #ccc;
margin:0;
padding: 0;
}
header{
height:44px;
width: 100%;
text-align: center;
line-height: 44px;
}
#wrapper{
display: flex;
flex-direction: column;
width: 100%;
/*height: 100%;*/
}
#sticker{
background-color: red;
flex: 1;
}
#sticker .sticker-con{
padding-bottom: 40px;
}
.footer{
background-color: green;
height: 40px;
}
</style>
<body>
<header>我是头部</header>
<p id="wrapper">
<p id="sticker">
<p class="sticker-con">我是内容</p>
</p>
<p class="footer">我是脚</p>
</p>
</body>
<script>
var wrapper = document.querySelector('#wrapper');
var h = document.body.clientHeight;
wrapper.style.minHeight = h - 44 + 'px'; // 减去头部导航栏高度
</script>
</html>Empfohlene Lektüre:
Reines CSS, um einen 3D-Effekt auf der Fotowand zu erzielen
CSS, um Fächermuster zu zeichnen
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Sticker-Fußzeilen-Layout in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!