vue项目设置footer始终处于页面底部
2020-06-07 05:52
260 查看
利用flex布局设置footer始终处于底部
相信很多前端开发工程师会遇到这样一个问题:在我们开发也免得时候总是会把footer部分组件化,但是由于我们的开发页面内容不够,这时候我们会想到采用定位的方式,但是当我们的页面的高度超过页面的高度的时候这种定位的方式很显然是存在问题的。
就像上面这种页面高度不够footer在中间。
接下来给提供一种我自己在vue-cli脚手架搭建的项目用flex布局实现这种footer始终在底部的效果。
首先我们先了解页面的布局代码:vue项目的页面代码:
<div class="wrapper"> <div class="header">header</div> <div class="section">section</div> <div class="footer">footer</div> </div>
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}
基本的布局就是这样,但是我们会发现按照这个样式写了,但是在我们的vue项目中还是没有footer始终在底部的效果。 我们查看元素会发现在我们入口文件的这个**id**为**app**的元素其实在页面中height还是没有100%; 这这里我们需要设置id为app的元素的高度为百分百但是我们直接设置height:100%是不起效果的。 我们需要这样写id为app元素的样式:
position:absolute; top:0; right:0; bottom:0; left:0;
这样我们才会发现我们的class为wrapper的元素的高度草撑满屏幕,实现footer始终在页面底部的效果。
相关文章推荐
- 怎样使footer始终处于页面的底部
- CSS-设置Footer始终在页面底部
- 无论页面内容多长,footer始终在页面底部
- vue项目中公用footer组件底部位置的适配问题
- vue进入页面时滚动条始终在底部
- 让footer始终位于页面的最底部
- Vue项目中设置每个单页面的标题
- 让网页footer部分始终在页面最底部
- C#:设置richTextBox的垂直滚动条始终处于最底部
- footer始终置于页面底部
- css让footer始终位于页面的最底部
- 页面主体高度不固定,如何让页面的footer始终在最底部
- <footer>始终在页面底部
- vue进入页面时滚动条始终在底部代码实例
- 在vue项目页面监听div滚动,和设置滚动值
- 让footer始终位于页面的最底部不随滚动而滚动
- 如何使页面的footer始终位于底部?
- 怎么让footer始终在页面底部?
- css让footer始终位于页面的最底部
- 让footer始终位于页面的最底部