页面内容不满屏幕高度时,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. ...
随机推荐
- 【STM32H7教程】第47章 STM32H7的FMC总线基础知识和HAL库API
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第47章 STM32H7的FMC总线基础知识和HA ...
- C# WPF之Material Design自定义颜色
微信公众号:Dotnet9,网站:Dotnet9,问题或建议:请网站留言, 如果对您有所帮助:欢迎赞赏. C# WPF之Material Design自定义颜色 阅读导航 本文背景 代码实现 本文参考 ...
- jQuery---表格删除案例
表格删除案例 on的简单事件 //1. 找到清空按钮,注册点击事件,清空tbody $("#btn").on("click", function () { $( ...
- 洛谷 UVA11388 GCD LCM
UVA11388 GCD LCM Description of the title PDF The GCD of two positive integers is the largest intege ...
- PTA 汉诺塔的非递归实现(C 语言)
借助堆栈以非递归(循环)方式求解汉诺塔的问题(n, a, b, c), 即将N个盘子从起始柱(标记为“a”)通过借助柱(标记为“b”)移动到目标柱(标记为“c”), 并保证每个移动符合汉诺塔问题的要求 ...
- maven的核心概念——继承
15.1 为什么需要继承机制 由于非compile范围的依赖信息是不能在“依赖链”中传递的,所以有需要的工程只能单独配置.例如: Hello <dependency> <groupI ...
- 安卓自定义View实例-----跟随手指移动的鸟
今天学习了一些安卓开发中的自定义布局,编写了简单一个实例,“跟随手指移动的鸟”,需要两张图片,背景图片和鸟的图片,鸟的图片可以在屏幕中跟随手指的移动而移动. 1.将两张图片导入到mipmap中: 2. ...
- 生成随机数(C++)
// generate random number #include <iostream> #include <iomanip> #include <cstdlib> ...
- mysql版本报错
IntelliJIdea2019.3打开原项目报mysql版本报错: Error opening zip file or JAR manifest missing : /C:/Users/flycat ...
- linux下定时网站文件备份和数据备份以及删除旧备份标准代码
直切正题: 文件备份:web.sh 数据备份:db.sh 删除旧备份:clear.sh vi web.sh文件内容为: #!/bin/bash 解释:shell脚本标准头 cd 网站文 ...