底部高度固定的情况下

<style>
body,html{ height: 100%; margin: 0; }
.content{
min-height: 100%;
padding-bottom: 400px;
box-sizing: border-box;
height: 1200px;
}
footer{
width: 100%;
height: 400px;
margin-top: -400px;
background: #666;
}
</style> <div class="content">页面内容</div>
<footer>底部</footer>
<style>
body,html{ height: 100%; margin: 0; padding: 0; }
.container{
position: relative;
min-height: 100%;
}
.content{
padding-bottom: 400px;
}
footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 400px;
background: #666;
}
</style> <div class="container">
<div class="content">页面内容</div>
<footer>底部</footer>
</div>

页面内容不满屏幕高度时,footer底部显示的更多相关文章

  1. Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

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

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

  3. footer部分,当页面主题内容不满一屏时,始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

  4. 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...

  5. div里面的内容超出自身高度时,显示省略号

    1.给DIV设置属性:width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候,超出的部分会以“ ...

  6. 点击按钮回到页面顶部或者某个高度时的问题,JQUERY

    $('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...

  7. html中iframe根据子页面内容动态修改高度

    JavaScript var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersi ...

  8. fullpage.js最后一屏不满一屏时,滚动方式

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

  9. HTML网页设计基础笔记 • 【第2章 排列页面内容】

    全部章节   >>>> 本章目录 2.1 音频标签和视频标签 2.1.1 音频标签 2.1.2 视频标签 2.2 列表.div 以及 span 标签 2.2.1 列表标签 2. ...

随机推荐

  1. 【原创】关于pyinstaller打包的程序执行出错问题,pyinstaller3.5只支持matplotlib3.0.2已经解决

    之前,在用pyinstaller打包一个python程序时没有问题,后来不知道什么原因,再打包时出现了所谓的pyinstaller打包报错: RecursionError: maximum recur ...

  2. Openshift部署流程介绍

    背景 Openshift是一个开源容器云平台,是一个基于主流的容器技术Docker和Kubernetes构建的云平台.Openshift底层以Docker作为容器引擎驱动,以Kubernetes 作为 ...

  3. centos7添加网卡

    centos7添加桥接网卡 1.使用ip a 命令查看是否有新加的网卡 如上图新网卡为ens36,默认分配ip为192.168.3.14 2. 使用nmcli conn 命令查看新网卡的uuid 3. ...

  4. MongoDB initial sync过程

    initial sync过程大致如下: (1)T1时间,从Primary同步所有数据库的数据,但不包括local的数据,复制时Mongo会扫描每个源数据库中的每个集合,并将所有数据插入对应的集合.通过 ...

  5. 为什么我用Ipad Pro做电子笔记和看PDF电子书

    为什么我用Ipad Pro做电子笔记和看PDF电子书 Ipad做笔记的优点: 1.ipad整理的笔记可以随时修改,可以看PDF的书,2.纸质书很重携带不便3.ipad的可通过关键词搜索笔记内容 4.笔 ...

  6. 面试题32 - III. 从上到下打印二叉树 III

    面试题32 - III. 从上到下打印二叉树 III 请实现一个函数按照之字形顺序打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右到左的顺序打印,第三行再按照从左到右的顺序打印,其他行以此类 ...

  7. Vue中进度条的使用

    1. 安装npm install --save nprogress 2.导入js和css import NProgress from 'nprogress'import 'nprogress/npro ...

  8. Spring MVC 定时任务注解说明

    一.注解说明. Spring 自带的定时任务执行@Scheduled注解,可以定时的.周期性的执行一些任务.查看@Scheduled的注解可以看到有以下三种: 1.1 String cron() de ...

  9. GHO文件安装到Vmware的两种姿势

    1.使用 Ghost11.5.1.2269 将gho转换为vmdk文件(虚拟机硬盘),Vmware新建虚拟机自定义配置,然后添加已有的虚拟硬盘文件. 注意ghost的版本,如果你是用Ghost11.5 ...

  10. Codeforces Round #620 (Div. 2) D

    构造一个排列,要求相邻之间的数满足给定的大小关系,然后构造出两个序列,一个序列是所有可能的序列中LIS最长的,一个所有可能的序列中LIS最短的 最短的构造方法:我们考虑所有单调递增的部分,可以发现要让 ...