页面内容不满屏幕高度时,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. ...
随机推荐
- C#中WinFrom保存文件SaveFileDialog类的使用方法
C#中WinFrom保存文件SaveFileDialog类的使用方法 使用的命名空间是:System.Windows.Forms; 常用属性: Title:保存对话框的标题,默认为"另存 ...
- vue中允许你继续使用swiper的组件 vue-awesome-swiper---切图网
swiper是一个在切图中好用到不行的图片轮播插件,包括3d轮播.h5滑屏等复杂应用都不在话下,到了vue项目一切逻辑完全颠覆了,没有获取dom的概念,还好有 vue-awesome-swiper组件 ...
- Openshift与Kubernetes的区别
Openshift与Kubernetes的区别 Openshift首个支持企业级 Java 的 PaaS 平台,支持 JEE6 与 JBoss 和其 Eclipse 集成开发环境以及 Maven 和 ...
- EasyUI笔记(四)菜单和按钮
本系列只列出一些常用的属性.事件或方法,具体完整知识请查看API文档 Menu(菜单) 菜单组件通常用于快捷菜单.他是构建其他菜单组件的必备基础组件.比如:menubutton和splitbutton ...
- comTest.json文件中内容,被NewsList.vue文件引入
本文目标:就是把扩散名为.json文件中数据,传递给NewsList.vue文件.主要通过导出,并传递给data(){}变紧 新建文件名为:commTest.json { "schoolNa ...
- 当课堂因监控技术变“囚笼”,存在争议的AI使用场景该被抵制吗?
当马云和马斯克高谈阔论AI是否会影响人类社会时,尚无"感情"的AI已在校园中"作恶".近日,一张AI监控课堂的GIF在网上迅速刷屏.这张GIF中记录了课堂中所有 ...
- ARM微处理器中支持字节、半字、字三种数据类型,地址的低两位为0是啥意思?
问题: ARM微处理器中支持字节.半字.字三种数据类型,其中,字需要4字节对齐(地址的低两位为0).半字需要2字节对齐(地址的最低位为0).我想问的是括号中的内容是什么意思呢?请牛人帮忙解释一下!谢谢 ...
- H5_0024:对于事先无法确定css大小的情况,可以通过JS动态修改
$(function(){ function Heights(){ var WinH = $(window).height(); ...
- thinkphp5.0将数据指模板中
在控制器中写: public function index(){ $username = \think\Db::table('navigation')->where(array("Vi ...
- while else ,pass执行else,break不执行else
count = 0while count <=5: count += 1 if count == 3:pass print("Loop".count) else: print ...