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. mysql数据备份之 xtrabackup

    上一篇简单介绍了一下mysqldump进行数据库的备份和恢复,这一篇说一下另一种备份工具xtrabackup,在InnoDB事务引擎泛滥的时代,xtrabackup可以很好的支持数据库的热备份,这就很 ...

  2. task一个任务结束后执行另一个操作

    //创建一个任务 Task<int> task = new Task<int>(() => { ; //显示进度条遮照层, this.ShowPrograssBar(); ...

  3. spring整合mybatisplus2.x详解

    一丶Mp的配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="htt ...

  4. hystrix原理

    一.hystrix 产生背景 微服务是解决复杂服务的一个方案,在功能不变的情况下,对一个复杂的单体服务分解为多个可管理的分支.每个服务作为轻量的子服务,通过RPC实现服务间的关联,将服务简单化.每个服 ...

  5. Cookie 、session、token都是什么？

    1.Cookie 起源:1993年,网景浏览器的员工为了让用户访问某网站时,进一步提高访问速度,实现个人化网络发明了cookie.(看来有时候的偷懒会促进社会的进步啊~,就像人们不想做饭就诞生了外卖) ...

  6. Https 与 iOS 信息安全

    转载自:swift-cafe 什么是 Https 咱们从最直观的说起. 我们平时在用电脑访问网页的时候,有时候会在地址栏的左边多出一个小锁的图标,就像这样: 这是大多数主流浏览器的一个通用做法,当我们 ...

  7. Mybaits 源码解析 （七）----- Select 语句的执行过程分析（下篇）（Mapper方法是如何调用到XML中的SQL的？）全网最详细，没有之一

    我们上篇文章讲到了查询方法里面的doQuery方法,这里面就是调用JDBC的API了,其中的逻辑比较复杂,我们这边文章来讲,先看看我们上篇文章分析的地方 SimpleExecutor public & ...

  8. ElasticSearch中文分词器-IK分词器的使用

    IK分词器的使用 首先我们通过Postman发送GET请求查询分词效果 GET http://localhost:9200/_analyze { "text":"农业银行 ...

  9. SasS 设计原则十二因素

    Heroku 是业内知名的云应用平台,从对外提供服务以来,他们已经有上百万应用的托管和运营经验.其创始人 Adam Wiggins 根据这些经验,发布了一个“十二要素应用宣言(The Twelve-F ...

  10. 通俗易懂了解Vue双向绑定原理及实现

    看到一篇文章,觉得写得挺好的,拿过来给大家分享一下,刚好解答了一些困扰我的一些疑惑!!! 1. 前言 每当被问到Vue数据双向绑定原理的时候,大家可能都会脱口而出:Vue内部通过Object.defi ...