比如上面这种情况，footer部分本来应该位于最底部，但是main内容太少导致连在一起，影响美观

解决方案：

给footer加上margin-top:负值 值的大小为footer的高度

写了个小demo代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0;"/>

</head>

<body style="padding:0;margin:0;">

    <div style="width:202px;height:202px;border:1px solid #ccc;background: #fff;overflow-y:scroll ">

        <div style="width:100%;min-height:100%;">

            <div style=" padding-bottom:40px;">

                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, assumenda culpa in maiores nesciunt placeat sequi. Libero neque quaerat quam unde veritatis voluptates. Commodi fugit impedit perspiciatis quam sed sit.

            </div>

        </div>

        <div style="width:100%; height:40px; background: red; color:#fff; margin-top:-40px">footer部分</div>

    </div>

</body>

</html>

　　注意div的嵌套关系，以及main部分的padding-bottom值（为footer留出空档大小）

footer部分，当页面主题内容不满一屏时，始终位于页面底部的更多相关文章

  1. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  2. fullpage.js最后一屏不满一屏时，滚动方式

    这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档.而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空, ...

  3. 页面内容不够高footer始终位于页面的最底部

    相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

  4. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  5. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

  6. 页面数据加载完成时,显示loading页面.数据加载完,loading隐藏.

    一,引入三个文件 jQuery版本使用 jQuery v1.7.1 jquery-easyui文件中,引入easyui-lang-zh_CN.js的js 做数据加载时使用jquery.blockui. ...

  7. 页面内容不满屏幕高度时，footer底部显示

    底部高度固定的情况下 <style> body,html{ height: 100%; margin: 0; } .content{ min-height: 100%; padding-b ...

  8. jquery “做页面滚动到某屏时改变状态标题” 所用知识点记录

    浏览器滚动条滚动时触发事件 //浏览器滚动条滚动时触发事件 $(window).scroll(function(){}); 浏览器窗口大小改变时触发事件 //浏览器窗口大小改变时触发事件 $(wind ...

  9. javascript实现页面右侧在线客服始终跟随鼠标滚动而上下滚动且始终位于屏幕中间

    效果如图,右侧的联系一栏始终位于页面的中间位置,且随着页面的上下滚动而滚动跟随 css的话没什么好说的,看图 代码 window.onload=window.onresize=window.onscr ...

随机推荐

  1. Spring Batch 读 10 万条记录，写到 MongoDB

    实践内容 从 MariaDB 一张表内读 10 万条记录,经处理后写到 MongoDB . 具体实现 1.新建 Spring Boot 应用,依赖如下: <!-- Web 应用 --> & ...

  2. C# 数据操作系列 - 2. ADO.NET操作

    0.前言 在上一篇中初略的介绍了一下SQL的基本写法,这一篇开始我们正式步入C#操作数据库的范围.通过这一系列的内容,我想大家能对于数据库交互有了一定的认识和基础.闲话不多说,先给大家介绍一个C#操作 ...

  3. Android 电池管理系统架构总结 Android power and battery management architecture summaries

    文章目录 1 整体架构 2 设计构架 2.1 driver 2.1.1 Charger.ko 2.1.2 Battery.ko 2.2 power supply 2.2.1 基础架构 2.2.2 代码 ...

  4. Coda docs

    a doc,反过来就是coda,有点冷. 对我而言,在线文档的好处在于在线数据库.存放代码等. Quip能高亮代码,但有时墙内不香,害得我用APP查看记录.Slite能高亮代码,但表格功能弱.号称al ...

  5. Java语言简介、基础组成、封装、继承、多态、抽象类、内部类、接口

    目录 Java简介 Java语言基础组成 面向对象 对象 封装 构造函数 this关键字 static(静态关键字) 主函数 静态什么时候用呢? 面向对象(数组工具对象建立) 设计模式 继承 成员变量 ...

  6. [hdu1023]递推

    http://acm.hdu.edu.cn/showproblem.php?pid=1023 如果把栈里面的元素个数表示成状态,每一步(共2 * n步)的状态构成的状态序列的种数就是答案,令dp[i] ...

  7. 快速了解pandas

    pandas主要就下面两方面:(只要稍微了解下面两点,那你就会用了) 1.两种数据结构(Series和DataFrame) 2.对这两种数据进行处理(主要是对DataFrame处理) -------- ...

  8. 《C程序设计语言》 练习3-3

    问题描述 编写expand(s1,s2),将字符串s1中类似于a-z类的速记符号在字符串s2中扩展为等价的完整列表abc.....xyz.该函数可以处理大小写字母和数字,并可以处理a-b-c,a-z0 ...

  9. 开源电影项目源码案例重磅分析，一套代码发布小程序、APP平台多个平台

    uni-app-Video GitHub地址:https://github.com/Tzlibai/uni-app-video 一个优秀的uni-app案例,旨在帮助大家更快的上手uni-app,共同 ...

  10. 【DevCloud · 敏捷智库】如何拆分用户故事

    提起用户故事拆分,我们听得最多的就是INVEST原则(关于INVEST原则可以参考文章“用户故事等于需求说明”——你一定没有写好用户故事),但很多人面临的问题是拿到一个较大的用户故事时,该如何拆分才能 ...