方案一

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. GMap.NET二次开发库

    GMap.NET的出现,解决了传统的依赖于地图引擎的代价高昂的解决方案,而且使用传统地图引擎,无法迁移,就连我们的地图放大缩小这样常规的方法,都是紧紧绑定在这些令人恶心的地图引擎开发包提供的SDK接口 ...

  2. PHP中GPC

    PS:PHP中绕过GPC的情况有很多,本文仅仅是总结了一些比较常见的,而且写的很浅[因为本人水平有限],欢迎大家积极拍砖:) 1.通过数据库(文本)中转 通过数据库中转: [注意存入数据库和selec ...

  3. iis配置js支持读取json文件配置

    默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. ...

  4. 注册Jdbc驱动程序的三种方式

    注册Jdbc驱动程序的三种方式 1. Class.forName("com.mysql.jdbc.Driver"); 2. DriverManager.registerDriver ...

  5. jQuery EasyUI 使用笔记

    大家有四次抢票机会.第一次是放票时间之后的30分钟.第二次机会是开车前的15天.第三个机会是开车前的48小时.第四个机会是开车前的24小时. $("#gys_key").combo ...

  6. Test Compress

    EDT:Embedded Deterministic Test. 包括的逻辑:Decompressor和Compactor Masking logic Addictional shift cycle( ...

  7. WebIM 聊天 Demo

    最近 2 个月用业余时间写了一个 IM ,动手之前想了很多,包括前期设计.语言.数据库等,经过了一番思想斗争,最终前台用 Vue.js 展示,Server 使用 node ,数据库使用 MongoDB ...

  8. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  9. response.write();改变页面布局的原因及解法

    Response.Write ,在ASP.NET 中不要随便使用 Response.Write,其原因是它会打乱 ASP.NET 的输出流顺序,在aspx.cs 中使用 Response.Write ...

  10. 一周试用yii开发一个带各种该有功能的web程序（三）

    接上篇,为什么index 模版里没有任何有关require,inculde类型关键字,却任然有我们认为“多余”的字符出现.因为在至少我的认知里html的结构该是<html><head ...