解决方案"/>
紧贴底部的页脚footer常用解决方案
问题描述:
当页面内容的高度 < 视口的高度 - 页头的高度(header) - 页脚的高度(footer) 就会出现footer页面不会紧贴在视口的最底部，而是跟在内容的下方。
**解决方案一: ** 采用一个视口相关的长度单位 vh/vw 和 calc函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}header {height: 60px;background-color: skyblue;}main {min-height: calc(100vh - 300px);background-color: purple;}footer {height: 240px;background-color: pink;}</style></head><body><div class="layout"><header>header</header><main>main</main><footer>footer</footer></div></body>
</html>
方案二: 更灵活的解决方案
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>* {margin: 0;padding: 0;}.layout {display: flex;flex-direction: column;min-height: 100vh;}header {height: 60px;background-color: skyblue;}main {flex: 1;background-color: purple;}footer {height: 240px;background-color: pink;}p {line-height: 100px;}</style></head><body><div class="layout"><header>header</header><main>main</main><footer>footer</footer></div></body>
</html>更多推荐
紧贴底部的页脚footer常用解决方案
发布评论