页面内容不满屏幕高度时,footer底部显示
底部高度固定的情况下
<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底部显示的更多相关文章
- Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。
一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...
- 网页布局中页面内容不足一屏时页脚footer固定底部
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- footer部分,当页面主题内容不满一屏时,始终位于页面底部
比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...
- 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放
直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...
- div里面的内容超出自身高度时,显示省略号
1.给DIV设置属性:width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候,超出的部分会以“ ...
- 点击按钮回到页面顶部或者某个高度时的问题,JQUERY
$('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...
- html中iframe根据子页面内容动态修改高度
JavaScript var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersi ...
- fullpage.js最后一屏不满一屏时,滚动方式
这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档.而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空, ...
- HTML网页设计基础笔记 • 【第2章 排列页面内容】
全部章节 >>>> 本章目录 2.1 音频标签和视频标签 2.1.1 音频标签 2.1.2 视频标签 2.2 列表.div 以及 span 标签 2.2.1 列表标签 2. ...
随机推荐
- 如何使用 Vue-TCB 快速在 Vue 应用中接入云开发
什么是 Vue TCB 我自己平时经常会用到 Vue 来开发前端应用.所以,基于 Vue 的插件系统,封装了一个 Vue 插件. 如何使用 1. 安装 vue-tcb 执行如下命令,安装 vue-tc ...
- npm ERR! Failed at the node-sass@4.13.0 postinstall script
node-sass 的数据源没设置 npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass 重新 npm in ...
- 电信IOT平台固件升级
1 离线签名 注意事项:特别重要,被坑了好久 A 将差分文件.bin格式的压缩成.zip 再进行签名 B 不能再中文目录下 否则,会出现校验失败 记住私钥 2 上传公钥 3 上传固件包 4 ...
- H5网页布局+css代码美化
HTML5的结构化标签,对搜索引擎更友好 li 标签对不利于搜索引擎的收录,尽量少用 banner图片一般拥有版权,不需要搜索引擎收录,因此可以使用ul + li <samp></s ...
- 第3种方法获取redis cluster主从关系
需求:使用cluster slots命令,获取redis cluster 主从对应关系. 说明:cluster slots命令对应的字段说明:http://redis.cn/commands/clus ...
- 纪中20日c组模拟赛T1 2121. 简单游戏
T1 2121. 简单游戏 (File IO): input:easy.in output:easy.out 时间限制: 1000 ms 空间限制: 262144 KB 具体限制 Goto Pro ...
- 数据库MySQL之存储过程
存储过程的定义 存储过程是一种在数据库中存储复杂程序,以便外部程序调用的一种数据库对象.其在思想上与面向对象编程中函数的定义与调用一致,存储过程只是SQL语言维度上的封装与运用. 存储过程的优缺点 优 ...
- SpringBoot从1.5.1→2.2.4项目加包扫雷二:打不到符号java: org.springframework.boot.autoconfigure.web.相关配置错误支持包
import org.springframework.boot.autoconfigure.web.DefaultErrorAttributes→org.springframework.boot.we ...
- 论文阅读笔记(十九)【ITIP2017】:Super-Resolution Person Re-Identification With Semi-Coupled Low-Rank Discriminant Dictionary Learning
Introduction (1)问题描述: super resolution(SP)问题:Gallery是 high resolution(HR),Probe是 low resolution(LR). ...
- HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure
问题: 原因:一般来说是由于.NET Core SDK的版本引起的,此时需要观察项目的所需的版本和本地存在的板本是否一致. 本例中,项目所需的版本是2.2如下图所示 本地存在的版本如下图所示,是不存在 ...