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. ESP8266开发之旅 网络篇③ Soft-AP——ESP8266WiFiAP库的使用

    1. 前言     在前面的篇章中,博主给大家讲解了ESP8266的软硬件配置以及基本功能使用,目的就是想让大家有个初步认识.并且,博主一直重点强调 ESP8266 WiFi模块有三种工作模式: St ...

  2. 百万年薪python之路 -- python2和python3的区别

    python2和python3的区别: python2获取的是整数 python3获取的是浮点数 print函数:(Python3中print为一个函数,必须用括号括起来:Python2中print为 ...

  3. .NET Core 3.0 构建和部署

    Default Executables 默认可执行文件 在 dotnet build 或 dotnet publish 期间,将创建一个与你使用的 SDK 的环境和平台相匹配的可执行文件. 和其他本机 ...

  4. 告别10kb/s的Github访问速度

    由于种种原因,国内访问Github的体验一直不是很好.本文通过优化DNS缓存的方式,避免浏览器直接解析Github域名,来改善Github的访问速度. 本文分为如下三个部分: 通过IP地址查询获取访问 ...

  5. LeetCode刷题笔记（2）HashMap相关应用

    1.问题描述 Example 1: Input: A = "this apple is sweet", B = "this apple is sour" Out ...

  6. SYZOJ中文安装指南

    Made By:Spaceskynet Thanks to other developers. 测试系统 Ubuntu-17.04 PS(全局变量): [syzoj2 path] = 您git的syz ...

  7. 数据文件包解析工具类 RandomAccessFile

    public class ReadTextFile { public static void main(String[] args) { pic2txt(); parseFrmFile(); //ur ...

  8. ABAP中将Unicode字符串转换成中文的方法

    以下为示例代码: DATA: LV_UNICODE TYPE STRING,           "Unicode字符串       LV_CHINESE TYPE STRING.      ...

  9. Django学习day6——模板

    在day4中,你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python 代码之中. html = "<html><body& ...

  10. Django学习day3——Django的简单使用

    开始一个项目 切换到django的虚拟环境中 执行: django-admin startproject mysite 创建第一个django项目mysite django生成的目录如下: E:. └ ...