footer始终置于页面底部

最新推荐文章于 2023-05-06 09:14:45 发布

weixin_39407291

最新推荐文章于 2023-05-06 09:14:45 发布

阅读量252

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39407291/article/details/107883467

版权

Vue 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

s我们做网站，底部一般会有版权信息，当页面内容高度不够时，版权部分就不是总在底部了。
利用flex布局，达到我们的要求。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	 	html,body{height: 100%;}
        .wrapper{display: flex;flex-direction: column;min-height: 100%;}
        .header{flex: 0;background: blue;}
        .section{flex: 1;background: #dedede;}
        .footer{flex: 0;background: red}
</style>
<body>
	<div class="wrapper">
	     <div class="header">header</div>
	     <div class="section">section</div>
	     <div class="footer">footer</div>
	</div>
</body>
</html>

但我们在Vue项目中，发现没有效果。需要我们去App.vue中给id名为app的元素添加样式。

position:absolute;
top:0;
right:0;
bottom:0;
left:0;

参考：https://blog.csdn.net/hb9278/article/details/96433386

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_39407291

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
footer始终置于页面底部

我们做网站，底部一般会有版权信息，当页面内容高度不够时，版权部分就不是总在底部了。利用flex布局，达到我们的要求。但我们在Vue项目中，发现没有效果。需要我们去App.vue中给id名为app的元素添加样式。position:absolute;top:0;right:0;bottom:0;left:0;参考：https://blog.csdn.net/hb9278/article/details/96433386...
复制链接

扫一扫