固定的底栏(flex布局)
有时,页面内容太少,无法占满一屏的高度,底栏就会抬高到页面的中间。这时可以采用Flex布局,让底栏总是出现在页面的底部。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .Site{width: 1300px; display: flex; min-height: 100vh; /*1vh表示浏览器高度的1%,100vh为浏览器高度*/ flex-direction: column;/*灵活的项垂直显示*/ } .content{ flex: 1;/* 让所有弹性盒模型对象的子元素都有相同的长度,忽略它们内部的内容 */ } .footer{ height: 100px; background-color: black; } </style> </head> <body class="Site"> <header>...</header> <main class="content">...</main> <footer class="footer"></footer> </body> </html>
效果图:
因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。