vue项目中，使用element-ui的布局，仍然出现footer不固定页面底部的情况，网上找到的一个管用的

方法是：footer高度固定+绝对定位

<html>

  <head>

  </head>

  <body>

    <div class="header">header</div>

    <div class="main">main content</div>

    <div class="footer">footer</div>

  </body>

</html>
<style >

  .header{background-color: #ffe4c4;}

  .main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */

  .footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

</style>
 

http://www.cnblogs.com/pinganzi/p/6383487.html

HTML的footer置于页面最底部的更多相关文章

  1. [JavaScript] css将footer置于页面最底部

    <!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-conten ...

  2. HTML5将footer置于页面最底部的方法(CSS+JS)

    JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...

  3. HTML的footer置于页面最底部的方法

    方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...

  4. vue实现部分页面导入底部 vue配置公用头部、底部，可控制显示隐藏

    vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...

  5. 网站设计:将Footer固定在浏览器底部

    在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部. function fi ...

  6. div+css页面右侧底部悬浮层

    效果体验:http://hovertree.com/texiao/css/23/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> ...

  7. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  8. IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

    E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到 ...

  9. 各种height 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度docu ...

随机推荐

  1. 05jmeter-responses中有多组json数据，提取同一条json数据的两个字段

    某接口返回结果如上图,取id和groupNo 1.读取确定的某条json数据:如取第一条,一个JSON Extractor即可实现 2.随机读取某条json数据: 需要两个JSON Extractor ...

  2. JVM 垃圾收集与内存分配

    判断对象是否还活着 引用计数法 给对象添加引用计数器,添加加1,引用失效减1,如果为0就是不可使用的.问题是不能解决互相引用带来的问题 可达性分析法 以GC Roots为起点,判断到一个对象是否有引用 ...

  3. 元祖tuple

    1.区别: 列表有序的,可以被修改 元祖一级元素不可以被修改,删除,添加,内部的列表中的元素可以被修改 tu = (5,'gf',58,[65,'hf'],'fdg') tu[3][1]=3562.定 ...

  4. 关于微信oauth登录的坑

    这是实习公司里微信公众号的一个小项目,用的是ssm.问题是获取用户openid为空. 分析下步骤 首先用户点击微信公众号按钮 访问微信服务器获取code 跳转到项目url 拿code访问微信服务器,获 ...

  5. django-模板之with标签（十二）

    就是给传过来的值取个别名.

  6. vue订阅者模式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Everything 信息泄露

    google语法: inurl:Diagnostics/index 这个无意间看到别人找到的,其实是everything自带的http服务器功能开启了忘记关,算是管理员自己的疏忽 可以看到开了ever ...

  8. 【XSY2484】mex

    Description 给你一个无限长的数组,初始的时候都为0,有3种操作: 操作1是把给定区间[l,r] 设为1, 操作2是把给定区间[l,r] 设为0, 操作3把给定区间[l,r] 0,1反转. ...

  9. super()函数的作用

    1.super()调用父类方法,并重写>>>>>>减少代码量(Square类实现) 2.它允许您在子类中调用超类的方法. 这种情况的主要用例是扩展继承方法的功能. ...

  10. CSPS模拟 96

    我菜的一批. 反省一下,我只能在简单场考的好的原因. 过分依赖灵感,不注意积累思路历程和各种套路.没灵感直接崩了 懒得打暴力,主要还是代码能力限制,打暴力真的很费时费力 不打对拍,这个emmm和第二条 ...