页面设计（CSS页脚设计示例） _Flexbox

本文概述页脚是在页面末尾组织大量站点导航和信息的有效方法。当用户完成当前页面的滚动或正在寻找有关该网站的其他信息时, 将在这里查找用户。
Flexbox用于构造html, 以便页脚始终位于页面底部。将页面的结构保持在三个HTML5标签内非常重要< header> , < main> 和< 页脚> 如下所示。

< body > < header > < / header > < main > < / main > < footer > < / footer > < / body >

例子：
的HTML

< !DOCTYPE html> < html > < head > < title > The Materialize Footer Example < / title > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" > < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" > < / script > < / head > < body class = "container" > < !-- Define the footer --> < footer class = "page-footer green" > < div class = "container " > < div class = "row" > < div class = "col l6 s12" > < h5 class = "white-text" > Footer Content < / h5 > < p class = "grey-text text-lighten-4" > Rows and columns are used to organize the footer content. < / p > < / div > < div class = "col l4 offset-l2 s12" > < h5 class = "white-text" > Links< / h5 > < ul > < li > < a class = "grey-text text-lighten-3" href = "https://www.lsbin.com/#!" > Link 1 < / a > < / li > < li > < a class = "grey-text text-lighten-3" href = "https://www.lsbin.com/#!" > Link 2 < / a > < / li > < li > < a class = "grey-text text-lighten-3" href = "https://www.lsbin.com/#!" > Link 3 < / a > < / li > < / ul > < / div > < / div > < / div > < div class = "footer-copyright green darken-3" > < div class = "container " > ? 2020 Copyright Text < a class = "grey-text text-lighten-4 right" href = "https://www.lsbin.com/#!" > More Links < / a > < / div > < / div > < / footer > < / body > < / html >

输出如下：

文章图片
粘性页脚：一种粘页脚无论页面上的内容有多少, 它始终位于页面底部。但是, 如果有很多内容, 此页脚将被下推, 因此它与固定页脚不同。将以下代码添加到你的CSS文件中。

body { display: flex; min-height: 100vh; flex-direction: column; }main { flex: 1 0 auto; }

例子：
的HTML

< !DOCTYPE html> < html > < head > < title > The Materialize Footer Example < / title > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" > < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" > < / script > < style > /* Add CSS for making the footer sticky */ body { display: flex; min-height: 100vh; flex-direction: column; }main { flex: 1 0 auto; } < / style > < / head > < body class = "container" > < !-- Use the < main> tag for displaying the contents of the page --> < main > < h1 style = "color: green; " > lsbin < / h1 > < p > A Computer Science portal for geeks. < / p > < / main > < !-- Define the footer --> < footer class = "page-footer green" > < div class = "container " > < div class = "row" > < div class = "col l6 s12" > < h5 class = "white-text" > Footer Content < / h5 > < p class = "grey-text text-lighten-4" > Rows and columns are used to organize the footer content. < / p > < / div > < div class = "col l4 offset-l2 s12" > < h5 class = "white-text" > Links< / h5 > < ul > < li > < a class="grey-text text-lighten-3" href = "https://www.lsbin.com/#!" > Link 1 < / a > < / li > < li > < a class="grey-text text-lighten-3" href = "https://www.lsbin.com/#!" > Link 2 < / a > < / li > < li > < a class="grey-text text-lighten-3" href = "https://www.lsbin.com/#!" > Link 3 < / a > < / li > < / ul > < / div > < / div > < / div > < div class = "footer-copyright green darken-3" > < div class = "container " > ? 2020 Copyright Text < a class="grey-text text-lighten-4 right" href = "https://www.lsbin.com/#!" > More Links < / a > < / div > < / div > < / footer > < / body > < / html >

【页面设计（CSS页脚设计示例）】输出如下：