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. spark上 spark-shell和java -jar访问hdfs路径问题

    部署spark集群 使用spark包 spark-1.0.2-bin-hadoop2.tgz 在spark-shell和java -jar访问hadoop hdfs上的文件写法是有区别的 在spark ...

  2. ESP8266开发之旅 网络篇⑬ SPIFFS——ESP8266 SPIFFS文件系统

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  3. Swagger Learing - Spring Boot 整合swagger

    学习了一下swagger. 这是编写的Demo 源码 https://github.com/AmberBar/Learning/tree/master/swagger-learning/swagger ...

  4. Mysql数据库（三）Mysql表结构管理

    一.MySQL数据类型 1.数字类型 (1)整数数据类型包括TINYINT/BIT/BOOL/SMALLINT/MEDIUMINT/INT/BIGINT (2)浮点数据类型包括FLOAT/DOUBLE ...

  5. Spring（三）面向切面编程（AOP）

    在直系学长曾经的指导下,参考了直系学长的博客(https://www.cnblogs.com/WellHold/p/6655769.html)学习Spring的另一个核心概念--面向切片编程,即AOP ...

  6. day3，用户交互，input的应用

    1.与用户交互 输入:input() python2.x版本 input后面家的东西要声明输入的类型       >>> input(">>:")   ...

  7. Unity5-ABSystem(二)：AssetBundle导出

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/lodypig/article/detai ...

  8. 【Auto.js images.matchTemplate() 函数的特点】

    Auto.js  images.matchTemplate() 函数的特点 官方文档:https://hyb1996.github.io/AutoJs-Docs/#/images?id=imagesm ...

  9. Linux wget 批量下载

    需求:已知50个pdf的URL地址,需要批量下载,该怎么办呢? 方案一:使用wget自带的一个功能 -i 选项  从指定文件中读取下载地址,这样的好处是一直是这一个wget进程下载所有pdf,不会来回 ...

  10. 学习笔记13_第三方js控件&EasyUI使用

    第三方UI包使用思路: 1.先映入各种JS包,包含JS版本包,第三方CSS包,第三方主JS包,第三方语言包. 2.确定要做什么,是对话框还是表格.3.根据Demo和目的,在<body>内, ...