全站年SVIP
全站1000+试题无限查看
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; background: #FF6633; } header, footer { background: #666666; height: 100px; } </style> </head> <body class="Site"> <header>header</header> <main class="Site-content">content</main> <footer>footer</footer> </body> </html>
Flex布局实例之固定的底栏
有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。这时可以采用Flex布局，让底栏总是出现在页面的底部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; background: #FF6633; } header, footer { background: #666666; height: 100px; } </style> </head> <body class="Site"> <header>header</header> <main class="Site-content">content</main> <footer>footer</footer> </body> </html>