比如上面这种情况，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. C# 数据操作系列 - 1. SQL基础操作

    0.前言 前篇介绍了一些数据库的基本概念和以及一些常见的数据库,让我们对数据库有了一个初步的认识.这一篇我们将继续为C#数据操作的基础填上一个空白-SQL语句. SQL(Structured Quer ...

  2. 【Hadoop离线基础总结】linux基础增强

    linux基础增强 查找命令 grep命令  (print lines matching a pattern) 概述: grep命令是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打 ...

  3. mongodb windows 集群搭建

    准备三台机器,系统:windows 8 192.168.1.1 192.168.1.2 192.168.1.3 每台机器上安装mongodb 服务,步骤: 下载以下文件并依次执行安装 clearcom ...

  4. RabbitMQ的发布订阅模式（Publish/Subscribe）

    一.发布/订阅(Publish/Subscribe)模式 发布订阅是我们经常会用到的一种模式,生产者生产消息后,所有订阅者都可以收到.RabbitMQ的发布/订阅模型图如下: 1.该模式下生产者并不是 ...

  5. Autojs - 用 JavaScript 实现自己的安卓手机自动化工具脚本

    我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完 ...

  6. Queue-PriorityQueue源码解析

    Queue队列通常是先进先出(FIFO),但也有特殊的非FIFO,如本文也分析的PriorityQueue. Queue接口 Queue接口定义的方法: 添加元素接口: add(E e) -> ...

  7. PHP中面向对象特性实现

    PHP近些年来成为全球最流行的网页编程语言,该语言以弱类型.易兼容.门槛低.开发快.功能强著称,且听别人这么说,我在有了c和c#基础后学习PHP过程中也并不是很顺利,该语言的一些特殊的语法规则又是让我 ...

  8. IP协议及其它的小弟 ,我保证没人会看的

    IP协议及其它的小弟 IP协议:127.0.0.1就一个32位的标识符.实际上: 类似这样的: 精神小伙慢慢看吧.我赌一包辣条你是不会认真看完的. IP协议的构成 地址解析协议 ARP 前面的叙述中我 ...

  9. AIRAC

    AIRAC是国际上划定的,以28天为一个周期的航行资料定期生效制. 2020年比较特殊,共有14个周期,分别是: 2001 2020/01/02 2020/01/29 2002 2020/01/30 ...

  10. Postman学习宝典（二）

    文章来源于:米阳MeYoung Postman 入门2 - Script.Runner 上次Postman 入门1 我们介绍全局变量和环境变量时已经使用过Tests 和 pre-request scr ...