页面内容不满屏幕高度时,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. ...
随机推荐
- 使用JDBC分别利用Statement和PreparedStatement来对MySQL数据库进行简单的增删改查以及SQL注入的原理
一.MySQL数据库的下载及安装 https://www.mysql.com/ 点击DOWNLOADS,拉到页面底部,找到MySQL Community(GPL)Downloads,点击 选择下图中的 ...
- Nginx虚拟主机配置(20200202)
一台机器上跑多个站点,即多个域名 curl -xIP:port 域名 用来指定访问的域名在哪个IP的哪个端口上 Nginx默认虚拟主机 不管什么域名解析到该服务器,都会访问到默认虚拟主机 ngi ...
- 2.Python函数/方法(method/function)详解
1.什么是函数 它是一段功能代码,理解为一种功能行为,在内存中有空间区域,函数需要被调用才能执行(通过函数名来调用): 好处: 1).提高代码的复用性 2).提升代码的阅读性 3).增加代码的扩展性 ...
- mysql基于二进制文件的主从复制
1.设置主服务器配置 必须在主服务器上启用二进制日志,因为二进制日志是将更改从主服务器复制到从服务器的基础,如果未启用log-bin,则无法进行复制 复制组内的每个服务 ...
- 剑指offer-面试题57_1-和为s的两个数字-双指针
/* 题目: 输入一个递增数组和一个s,求和等于s的两个数组中的数字. */ /* 思路: 双指针问题. */ #include<iostream> #include<cstring ...
- Android开发第一天---AndroidStudio的安装和第一个安卓开发
今天已经是开始学习Android的第二天,我居然才把AndroidStudio开发环境安装并配置好,我只能说“我太难了”,下了好几个版本,终于找到了一个合适的,得出一个结论外国的东西是真的不太好用啊, ...
- XGBoost学习笔记1
XGBoost XGBoost这个网红大杀器,似乎很好用,完事儿还是自己推导一遍吧,datacamp上面有辅助的课程,但是不太涉及原理 它究竟有多好用呢?我还没用过,先搞清楚原理,hahaha~ 参考 ...
- JAVA输出流与输入流
输出流 编程入门的第一个程序,输出一串字符串 public class C { public static void main(String[] args) { System.out.println( ...
- Windows10开发环境搭建
开发环境基本介绍:(是以刚重装过系统的电脑进行介绍的,电脑刚装完的操作见其他的文档) Eclipse环境搭建: 1. 下载JDK (本例以JDK13.0.1为例) 2. 配置环境变量(主要是JAVA_ ...
- redis 4.x及以上的未授权访问
00x01 环境搭建 选择在kali中复现 选择了redis5.0.5版本 1.下载并安装: $ wget http://download.redis.io/releases/redis-5.0.5. ...