页面内容不满屏幕高度时,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. ...
随机推荐
- 【JZOJ 5048】【GDOI2017模拟一试4.11】IQ测试
题目大意: 判断一个序列是否是另外一个序列删除若干个数字之后得到的. 正文: 我们可以定义两个指针,分别指向长序列和短序列. 拿样例来举例: 如果指针指的数相同,两个指针都往右跳: 如果不同,则指向长 ...
- Git操作:查看所有分支的提交修改
我们在廖雪峰Git教程或者一些书籍学习git分支时,大都会学习到这样一个命令git log --graph或者就是单纯的git log,他可以用来查看当前分支.但是这个弊端就是:它只能查看与当前分支有 ...
- centos7 字体库。vim乱码
centos7 字体库.vim乱码 windows上传文件到centos,需要先使用dos2unix命令进行格式转换 先查看/usr/share下有没有这两个文件 没有的话yum -y install ...
- 【56】目标检测之NMS非极大值抑制
非极大值抑制(Non-max suppression) 到目前为止你们学到的对象检测中的一个问题是,你的算法可能对同一个对象做出多次检测,所以算法不是对某个对象检测出一次,而是检测出多次.非极大值抑制 ...
- 在Oracle中使用sqlload做数据迁移
前提:检查sqlload是否可用,输入sqlldr,提示有版本即可 1.创建测试表(已有则跳过)create table testTable(user varchar2(255),name var ...
- 面试想拿 10K,HR 说你只值 7K,该怎样回答或者反驳?
当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫. 礼貌地说:"7K是吗?了解了.嗯~其实我对贵司的面试官印象很好.只不过,现在我的手头上已经有一份11K的offer. ...
- adworld python-trade | python反编译
附件是.pyc格式的文件. Python程序中,原始程序代码存储在.py文件里,而Python会在执行.py文件的时候,会将.py形式的程序编译成中间式文件(byte-compiled)的.pyc文件 ...
- PIE-SDK For C++矢量数据的投影转换
1.功能简介 目前在地理信息领域中数据包括矢量和栅格两种数据组织形式,每一种数据都可以对投影进行转换,目前PIE SDK支持矢量和栅格数据的投影转换功能,下面对矢量数据的投影转换功能进行介绍. 2.功 ...
- ZedGraph5.1.5源码分析去掉鼠标悬浮内容闪烁问题(附源码下载)
场景 在使用ZedGraph绘制曲线图时,将鼠标悬浮时内容闪烁,且频率很高. 找到其源码,发现不论鼠标移动的范围大小,甚至乎不论鼠标是否移动,都要刷新一次Tooltip. 注: 博客主页:https: ...
- React.js高阶函数的定义与使用
/* 高阶函数的简单定义与使用 一: 先定义一个普通组件 二: 用function higherOrder(WrappendComponent) { return } 将组件包裹起来,并用export ...