方案一

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. C++笔记（一）

    一.动态数组 一般我们定义数组都是用下面的方式: int str[100]; 但对于一些需要手动输入数组大小的情况,这种定义方式就行不通了.因为上面这种方式要求事先知道数组大小,并且给数组中括号中必须 ...

  2. java的基本数据类型有八种：

    1)四种整数类型(byte.short.int.long):    byte:8 位,用于表示最小数据单位,如文件中数据,-128~127    short:16 位,很少用,-32768 ~ 327 ...

  3. 前端开发--面试题整理（JS篇）

    1.截取字符串abcdace的acealert('abcdace'.substring(4)); 2.规避javascript多人开发函数重名问题命名空间封闭空间js模块化mvc(数据层.表现层.控制 ...

  4. C++ 模拟Map

    JDK中的Map类型采用键值对的方式保存数据,且键(key)不能重复.在HashMap的实现中实际采用了Hash分类加数组排序的方式.在C++中我没有采用这样的算法.而是通过首先对Key值进行二叉树排 ...

  5. Oracle Grid Infrastructure安装部署文档

    1. 部署环境步骤 1.1 软件环境 操作系统: CentOS release 6.5 oracle安装包: linux.x64_11gR2_grid.zip linux.x64_11gR2_data ...

  6. WPF中实例化Com组件，调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常

    WPF中实例化Com组件,调用组件的方法时报System.Windows.Forms.AxHost+InvalidActiveXStateException的异常 在wpf中封装Com组件时,调用组件 ...

  7. Android AsyncTask分析

    ---恢复内容开始--- 因为android的UI线程是不安全的,如果你UI线程里执行一些耗时任务,很容易就导致程序崩溃.并且目前网络任务也不能够在UI线程里执行.处理这些问题除了直接写一个线程以外, ...

  8. jdbc的实例应用：增删查改实现

    //在jdbc中进行增删查改 //查看所有 public static void findAll() { String url = "jdbc:mysql://localhost:3306/ ...

  9. C# ASP.NET 读取EXCEL 单元格 读取 空值 不显示

    跟大家分享一下,[摘自]:http://blog.csdn.net/li185416672/article/details/8213729 读取excel时,某些单元格为空值 原来如此: 当我们用ol ...

  10. 折半查找（java）（边学习边更新）

    ---恢复内容开始--- class ArrayTest3 { public static void main(String[] args) { //int [] arr=new int[]{54,4 ...