方案一

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. android ContentObserver

    android 设置飞行模式  :  长按关机键 3 秒. 工作中,需要开启一个线程大量的查询某个数据库值发送了变化,导致的开销很大,后来在老大的指点下,利用了 ContentObserver完美的解 ...

  2. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  3. CocoaPods和git

    CocoaPods是第三方框架的管理工具 CocoaPods 安装使用步骤: 1. 利用 gem 安装 CocoaPods! 1> gem 服务器在国外,提供了非常丰富的终端应用程序! gem ...

  4. EntityFramework 使用经验

    1.Nuget控制台常用命令 1.获取EntityFramework命令帮助:get-help EntityFramework  2.在项目中启动数据迁移:Enable-Migrations 3.添加 ...

  5. Google-glog 日志库使用手记

    作者:高张远瞩(HiLoveS) 博客:http://www.cnblogs.com/hiloves/ 转载请保留该信息 Google Glog 是一个C++语言的应用级日志记录框架,提供了 C++ ...

  6. iis7 64位 操作excel的一系列问题（未完待续）

    查了半天发现是IIS跑在64位环境下引起的.而64位下,是木有Access数据库的驱动的(包括Excel也不行). 解决办法是:在目标网站的应用程序池中选择高级设置,然后将启用32位应用程序设置为tr ...

  7. OC-03类的声明和实现

    例子 //类名:Car//属性:轮胎个数.时速//行为:跑 #import<Foundation/Foundation.h >//完整的写一个函数:函数的声明和定义(实现)//完整的写一个 ...

  8. GPIO口及中断API函数【转】

    本文转载自:http://blog.sina.com.cn/s/blog_a6559d9201015vx9.htmlG #include <linux/gpio.h> // 标准 GPIO ...

  9. Linux下面配置文件~/.bash_profile

    ~/.的意义是什么? ~ 代表你的/home/用户名目录 假设你的用户名是x,那么~/就是/home/x/ . 是代表此目录本身,但是一般可以不写 所以cd ~/. 和cd ~ 和cd ~/效果是一样 ...

  10. IOS 创建渐变图层

    代码如下 typedef enum { GradientLayerKindLeftRight = , GradientLayerKindUpDown, GradientLayerKindLBRT,// ...