页面内容不满屏幕高度时,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. ...
随机推荐
- Asp.ner Core-Blazor随手记
后续继续补充内容.... 1.安装.Net Core3.0 SDK及以上版本都有待Blazor 2.如果想在.razor页面直接使用C#代码,相当于html里面嵌入了C#代码,可以在命令行里面输入下面 ...
- C# 如何获取日期时间各种方法
我们可以通过使用DataTime这个类来获取当前的时间.通过调用类中的各种方法我们可以获取不同的时间:如:日期(2019-01-09).时间(16:02:12).日期+时间(2019-01-09 16 ...
- 论文阅读笔记(二十一)【CVPR2017】:Deep Spatial-Temporal Fusion Network for Video-Based Person Re-Identification
Introduction (1)Motivation: 当前CNN无法提取图像序列的关系特征:RNN较为忽视视频序列前期的帧信息,也缺乏对于步态等具体信息的提取:Siamese损失和Triplet损失 ...
- 获取WEB图片
public string GetJpgFile(string strFileServerPath ,string strReportDir) { string strPath = "&qu ...
- 取Cookie值
string url_Login_Group = "http://ui.ptlogin2.qq.com/cgi-bin/login?appid=549000912&daid=5&am ...
- JavaSE学习笔记(3)---面向对象三大特性
JavaSE学习笔记(3)---面向对象三大特性 面向对象的三大特征:继承.封装.多态 1.封装 面向对象编程语言是对客观世界的模拟,客观世界里成员变量都是隐藏在对象内部的,外界无法直接操作和修改.然 ...
- Email-发送邮件
Email 发送邮件 import smtplib from email.mime.text import MIMEText from email.mime.multipart import MIME ...
- Java文件与类动手动脑
动手动脑1: 使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件. package classJava; import java.io.IOExcepti ...
- Unsupervise-learning-notes
K-means 数据是没有label的,按照数据之间的相似性进行分类 原理and步骤 是随机选取K个对象作为初始的聚类中心, 计算每个对象与各个种子聚类中心之间的距离,把每个对象分配给距离它最近的聚类 ...
- [PAT] A1020 Tree Traversals
[题目] distinct 不同的 postorder 后序的 inorder 中序的 sequence 顺序:次序:系列 traversal 遍历 题目大意:给出二叉树的后序遍历和中序遍历,求层次遍 ...