防止页面高度不足，引起的底部上浮问题

最新推荐文章于 2022-06-21 09:17:05 发布

weixin_34416754

最新推荐文章于 2022-06-21 09:17:05 发布

阅读量214

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/FineDay/articles/4821799.html

版权

本文介绍如何使用CSS3的Flexbox布局使网站底部栏（footer）始终显示在页面底部，即使主要内容区域高度不足也能保持位置不变。通过设置html高度为100%并利用.flex属性，可以确保footer不会上浮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可能的问题网站footer部分上浮，可通过css3的方式

html 结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;padding:0px;}
html{height:100%;}
.site{display:flex;flex-direction:column;min-height: 100%;}

---------------------------------------// 所示橙色部分可用 .site{display:flex;flex-direction:column;min-height: 100vh;} 表示

即是vh的意思：视口被均分为100单位的vh 示例代码: h1 { font-size: 8vh; } 如果视口的高度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100
.header{background:green;height:100px;}-----height:100px;可改为flex-basis：100px；
.main{background:pink;flex:1;} -------------------------------//要理解flex的意思，父元素减去未设置flex的子元素的部分，按照flex分
.footer{height:40px; background:orange;}
</style>
</head>

vh支持情况：