底部高度固定的情况下

<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底部显示的更多相关文章

  1. Header 与 Footer 的 DIV 高度固定, 中间内容 DIV高度自适应,内容不满一页时,默认填满屏幕。

    一.需求: 页面布局分三大块: Header Body Footer 1.内容不满一页时,Footer 在屏幕最底部,Body 填充满 Header 与 Footer 中间的部分. 2.当缩小浏览器时 ...

  2. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  3. footer部分,当页面主题内容不满一屏时,始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

  4. 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...

  5. div里面的内容超出自身高度时,显示省略号

    1.给DIV设置属性:width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候,超出的部分会以“ ...

  6. 点击按钮回到页面顶部或者某个高度时的问题,JQUERY

    $('#shang').click(function(){ $('html,body').animate({scrollTop: '0px'}, 800); }); 不能写成$(window).ani ...

  7. html中iframe根据子页面内容动态修改高度

    JavaScript var browserVersion = window.navigator.userAgent.toUpperCase(); var isOpera = browserVersi ...

  8. fullpage.js最后一屏不满一屏时,滚动方式

    这两天公司网页改版用到fullpage.js这个滚屏插件,页面内容整屏的滚动,不成问题,各种设置在网上也都有文档.而我遇到的问题就是,页面内容不满屏的时候,和上面的内容放一块就太挤,单独放一屏就太空, ...

  9. HTML网页设计基础笔记 • 【第2章 排列页面内容】

    全部章节   >>>> 本章目录 2.1 音频标签和视频标签 2.1.1 音频标签 2.1.2 视频标签 2.2 列表.div 以及 span 标签 2.2.1 列表标签 2. ...

随机推荐

  1. 解决burpsuit 浏览器您的连接不是私密连接的问题

    转载来源:https://www.cnblogs.com/hun-ya/p/8365255.html Burp Suite要抓HTTPS的包的话,是需要有Burp Suite的CA证书的 为什么要证书 ...

  2. Android在Activity中与Fragment中创建自定义菜单的区别

    区别就在这里,Activity中添加菜单要这样: public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R ...

  3. 如何知道一个路由器的 BSSID ?

    使用 Mac 连接上这个路由器,然后使用 option 按 wifi 按钮,可以在详情页里找到. 有些路由中继的设置需要使用 BSSID ,比如 pandorabox openwrt

  4. PHP0021:PHP COOKIE 设置修改删除

  5. 使用jdbc实现ActiveMQ持久化

    步骤一:创建一个数据库 步骤二:配置activemq.xml配置文件 1.在persistenceAdapter加入如下配置 <!--createTablesOnStartup 启动是否创建表 ...

  6. Android实战项目——家庭记账本(四)

    今天是开发的第四天,完成的主要内容如下: 1.账单查询功能的完善以及查询结果的显示和编辑 2.侧边栏布局的实现 3.首页fragment中本月与上月对比账目情况 实现的效果如图: 已添加的账单内容以及 ...

  7. 【Git】git使用 - 冲突conflict的解决演示

    冲突的解决 (如果git使用不熟练)建议在push不了时,pull之前.在本地创建一个新的分支并commit到local,以保证本地有commit记录,万一出什么问题,可以找回代码,以免代码丢失. ( ...

  8. BLOB-数据库中用来存储二进制文件的字段类型

    BLOB (binary large object)----二进制大对象,是一个可以存储二进制文件的容器. 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型. BLOB是一个大文件,典型 ...

  9. 聊聊SNMP协议

    注:博主 Chloneda:个人博客 | 博客园 | Github | Gitee | 知乎 本文源链接:https://www.cnblogs.com/chloneda/p/snmp-protoco ...

  10. @Autowired、@Resource、@Qualifier区别

    @Autowired 1.属于spring的注解,如果不想和Spring耦合的太紧,就不推荐使用. 2.默认情况下,要求依赖对象必须存在,不能为null.如果允许为空,那么设置属性值required为 ...