比如上面这种情况，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. STM32学习笔记——GPIO

    单片机型号STM32F407VET6. 概述 GPIO的分类: 可接受5V输入的(FT),绝大多数引脚都是: 只能接受3.3V输入的(TTa),只有PA4和PA5,就是DAC输出的两个引脚: 其他,包 ...

  2. JDBC09 CLOB文本大对象

    CLOB(Character Large Object) -用于储存大量的文本数据 BLOB(Binary Large Object) -用于存储大量的二进制数据 -大字段有些特殊,不同数据处理的方式 ...

  3. calc less 下不起作用

    在 less中不能使用css3 calc属性不能 css3 新增长度计算属性 可以根据不同单位计算宽度 .test{ width: calc(100% - 150px); } 但是当我们在less中使 ...

  4. 将mat文件中的数据按要求保存到txt文档中（批处理）

    之前有个老朋友,让帮忙将一个mat中的数据重新保存到txt中,由于数据比较多需要用到批处理,之前弄过很多次,但每次一到要用的时候总是忘记怎么写了,现在记录一下,免得后面老是需要上网搜.这里先说一个比较 ...

  5. .Net Core3.0 WebApi 项目框架搭建 一：实现简单的Resful Api

    .Net Core3.0 WebApi 项目框架搭建:目录 开发环境 Visual Studio 2019.net core 3.1 创建项目 新建.net core web项目,如果没有安装.net ...

  6. WebApiClientCore使用说明

    前言 我是WebApiClient库的作者,目前在开发其.netcore版本,在整理其readme后,想想一来这部分内容可能对大家有用,二来兴许能给WebApiClient带人更多人气,所以将read ...

  7. 201771010128 王玉兰《面象对象程序设计 (Java) 》第六周学习总结

    ---恢复内容开始--- 第一部分:基础知识总结: 1.继承 A:用已有类来构建新类的一种机制,当定义了一个新类继承一个类时,这个新类就继承了这个类的方法和域以适应新的情况: B:特点:具有层次结构. ...

  8. WARN: Establishing SSL connection without server’s identity verification is not recommended

    问题 使用Spring JDBC 连接 MySQL时,出现如下警告: WARN: Establishing SSL connection without server's identity verif ...

  9. 树状数组区间更新区间查询以及gcd的logn性质

    题目描述 给你一个长为n的序列a m次查询 每次查询一个区间的所有子区间的gcd的和mod1e9+7的结果 输入描述: 第一行两个数n,m之后一行n个数表示a之后m行每行两个数l,r表示查询的区间 输 ...

  10. UVA10480 Sabotage

    题目链接:https://cn.vjudge.net/problem/UVA-10480 知识点: 最小割 题目大意: 求最小割并打印出最小割必须割掉的边. 解题思路: 在跑完 \(sap\) 后的残 ...