方案一

html {

    height: 100%;

}

body {

    position: relative;

    min-height: 100%;

    box-sizing: border-box;

    padding-bottom: 80px; /* .footer 的高度，为 footer 占位 */

}

.footer {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 80px;

}

方案二

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        html,body {

            height: 100%;

            margin: 0;

            padding: 0;

        }

        #container {

            min-height: 100%;

            height: auto !important;

            height: 100%;

        }

        #page {

            padding-bottom: 60px;/*高度等于footer的高度*/

        }

        #footer {

            position: relative;

            margin-top: -60px;/*等于footer的高度*/

            height: 60px;

            clear:both;

            background: red;

        }

        #header {

            padding: 10px;

            background: lime;

        }

        #left {

            width: 18%;

            float: left;

            margin-right: 2%;

            background: blue;

        }

        #content{

            width: 60%;

            float: left;

            margin-right: 2%;

            background: green;

        }

        #right {

            width: 18%;

            float: left;

            background: blue;

        }

    </style>

</head>

<body>

<div id="container">

    <div id="header">Header</div>

    <div id="page" class="clearfix">

        <div id="left">Left sidebar</div>

        <div id="content">Main contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain contentMain content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi blanditiis, consequuntur dolorem ea eos magnam necessitatibus numquam, quaerat quia quod rem sint unde. Deserunt dolorum laboriosam minus repellat veniam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, adipisci architecto, blanditiis cumque doloremque, ea earum et maxime non pariatur quas quia quibusdam recusandae similique sit soluta tempora voluptas voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad autem ea impedit ut vel. Aut culpa exercitationem incidunt itaque non, nulla saepe voluptas. Inventore, molestiae perferendis provident quaerat ullam veniam.

         pisicing elit. Accusamus cupiditate facilis fugit inventore iste itaque iusto modi, natus nobis numquam obcaecati odio odit optio ratione sit ullam veniam vero. Vero.

       </div>

        </div>

</div>

<div id="footer">Footer </div>

</body>

</html>

　　

　　

footer绝对定位但是不在页面最下边解决方案的更多相关文章

  1. div footer标签css实现位于页面底部固定

    Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你的页面看上去很不好看,特别是现在宽屏越来越多,这种现象更是常见,本文将介绍两种解决方案,需要了解的朋友可以 ...

  2. JS中用execCommand("SaveAs")保存页面兼容性问题解决方案

    开发环境:ASP.NET MVC,其他环境仅供参考. 问题描述:在开发中遇到这样的需求,保存页面,通常使用JavaScript的saveAs进行保存,各浏览器对saveAs支持,见下表. 代码一:初始 ...

  3. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  4. 常见的H5移动端Web页面Bug问题解决方案总汇

    解决jquery ajax调用远程接口的跨域问题 首先,接口必须允许远程调用.这是后端或者运维的事情.你必须保证你得到的一个接口是允许远程调用的.否则,就没啥了. $.ajax({ type:'get ...

  5. Html5页面返回机制解决方案

    需要处理的返回场景: 1.正常的a->b->c 2.页面上的按钮触发需要登陆 3.页面跳转需要登陆 4.页面上的可修改的部分(如选择地址,地址页面本身也是可以增删改查的) 整体的原则是原路 ...

  6. javascript移动端禁止页面滑动的解决方案

    1 前言 移动端网页,发现ios平台的iphone或者ipad,网页可以上下左右移动,而Android版则不会.仅作为记录使用. 2 代码 var mo=function(e){e.preventDe ...

  7. 【其他】Windows 系统安装IIS 打开页面出现空白解决方案

    部署IIS过程中遇到了一个奇怪的问题,就是怎么设置打开的页面都是一篇空白,IIS也没有任何报错,翻遍互联网好不容易找到了解决方法,今天就教给大家,希望大家不要走弯路.此方法Windows xp.7.8 ...

  8. jsp页面中文乱码解决方案

    一.JSP页面中文乱码 在JSP页面中,中文显示乱码有两种情况:一种是HTML中的中文乱码,另一种是在JSP中动态输出的中文乱码. 先看一个JSP程序: <%@ page language=&q ...

  9. rem手机端页面自适应完美解决方案（最新）

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

随机推荐

  1. UIBUTTON titlelabel.text 不显示

    button.titlelabel.text=@"查询";设置后运行发现没事正确显示. 查找后原来UIButton分状态的,textLabel不管用 [button setTitl ...

  2. UIAlertController警告视图和操作表单

    //创建一个myAlert1操作表单对象(UIAlertControllerStyleActionSheet为操作表单,UIAlertControllerStyleAlert为警告视图) UIAler ...

  3. Centos vsftpd服务器搭建

    Centos vsftpd服务器搭建 时间:2016-07-18 1.最为简单的vsftpd服务器搭建 1.安装vsftpd 1.yum 安装 yum install vsftpd 2.rpm文件安装 ...

  4. jsonp 使用总结

    首先:jsonp是json用来跨域的一个东西. 原理是通过script标签的跨域特性来绕过同源策略. 发送端: $.ajax({ type : "post", url : &quo ...

  5. oracle性能优化之表设计

    数据库优化的目标无非是避免磁盘I/O瓶颈.减少CPU利用率和减少资源竞争.为了便于读者阅读和理解,笔者参阅了Sybase.Informix和Oracle等大型数据库系统参考资料,基于多年的工程实践经验 ...

  6. 【转】PowerShell 连接SQL Server 数据库 - ADO.NET

    转至:http://www.pstips.net/connect-sql-database.html PowerShell 通过ADO.NET连接SQL Server数据库,并执行SQL脚本.工作中整 ...

  7. 读取Devexpress内部的图标

    1.图标在Dev源码的存储路径: Sources D.x.u 15.1.3\DevExpress.Images\Images   2.引用DevExpress.Images.v15.1.dll文件,代 ...

  8. C#语法糖，让编程更具乐趣

    一.什么是语法糖 语法糖(Syntactic sugar),也译为糖衣语法,是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语,指计算机语言中添加的某种语法,这种语法 ...

  9. qt qml scrollbar 移动APP风格的滚动轴

    依附于Flickable组件的滚动轴    自动放置在恰当位置    拖动时显示,不动时消失Lisence: MIT 请保留此声明Author: surfsky.cnblogs.com 2014-12 ...

  10. SAMSUNG某型号一千短信成功记录！对比其他软件恢复不成功的案列！

    Hello! 大家好欢迎再次来到Dr.wonde的博客, 下面谈一下今天的案列,今年11月26号收到了一客户寄来的三星S4手机恢复里面短信, 如下图所示,用其他软件恢复以后,数据为零,没有恢复,,这下 ...