css如何实现页面内容不够高页脚始终位于页面的最底部效果?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用:
1.最小高度来控制内容中间内容区高度来让页面高度能够占满显示屏一屏,但是大型网站页面比较多的情况下页脚都是模块化添加进去的,每个页面高度都不会一样,不可能去设置每个页面中间内容区最小高度高度,而且用户的显示屏的大小都不一样,无法精确设置最低高度高度,无法保证用户看到页面页脚不是在最底部或页面不出现滚动条;
2。页脚固定定位:页脚相对于身体固定定位会显示在最底部,但是页面有滚动条时,页面滚动,页脚会悬浮在内容区上,可能以上都不是你想要的效果。
可以用下实例方法解决你的问题:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"祝辞
& lt; title>猿来是勇者& lt;/title>
& lt;/head>
& lt; !——方法一——比;
& lt; style>
*{保证金:0;填充:0;}
html,身体{高度:100%;}
#{容器:相对;宽度:100%;最小高度:100%;padding-bottom: 100 px;box-sizing: border-box;}
标题{宽度:100%;身高:200 px;背景:# 999;}
.main{宽度:100%;身高:200 px;背景:橙色;浮动:左;}
页脚{宽度:100%;身高:100 px;/*页脚的高度一定要是固定值*/位置:绝对;底部:0 px;左:0 px;背景:# 333;}& lt;/style>
& lt; body>
& lt; p id=癱ontainer"祝辞
& lt; header> HEADER
& lt;部分类=癿ain"祝辞MAIN
& lt;/p>
& lt;/body>
& lt; !——方法二——比;
& lt; !——& lt; style>
*{保证金:0;填充:0;}
html,身体{高度:100%;}
#{容器显示:flex;flex-direction:列;高度:100%;}
标题{背景:# 999;flex: 0 0汽车;高度:100 px;}
.main {flex: 1 0汽车;}
.bg{背景:橙色;高度:200 px;}
页脚{背景:# 333;flex: 0 0汽车;高度:100 px;} & lt;/style>
& lt; body>
& lt; p id=癱ontainer"祝辞
& lt; header> HEADER
& lt;部分类=癿ain"祝辞
类& lt; p=癰g"祝辞MAIN
& lt;/section>
& lt; footer> FOOTER
& lt;/p>
& lt;/body>——比;
& lt;/html> 感谢各位的阅读!看完上述内容,你们对css如何实现页面内容不够高页脚始终位于页面的最底部效果大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注行业资讯频道。
