footer始终在页面最底部的方法(问题待检验)
一。css方法
<style type="text/css">
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
.head{
flex: 0 0 auto;
}
.content{
flex: 1 0 auto;
}
footer{
background: #333;
flex: 0 0 auto;
}
</style>
二。js方法
<script type="text/javascript">
// 判断窗口高度,使footer始终在底部
$(document).ready(function(){
if($(document.body).height()<$(window).height()){
$(".footer").css({"position":"fixed","bottom":"0px"});
}
})
</script>
footer始终在页面最底部的方法(问题待检验)的更多相关文章
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- CSS-设置Footer始终在页面底部
Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...
- HTML的footer置于页面最底部的方法
方法一:footer高度固定+绝对定位 <html> <head> <style type="text/css"> html{height:%; ...
- HTML5将footer置于页面最底部的方法(CSS+JS)
JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ ...
- 记一些让footer始终位于网页底部的方法
上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...
- 使用css方法使footer保持在页面的最底部
使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...
- 将HTML页面页脚固定在页面底部(多种方法实现)
当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
随机推荐
- windows7安装docker异常:looks like something went wrong in step ‘looking for vboxmanage.exe’
一.背景 最近准备抽点时间研究下docker,选择在家中的windows系统上安装. 我的系统是windows7,首先安装Docker Toolbox,Docker Toolbox是一个工具集,主要包 ...
- [Scikit-learn] 1.1 Generalized Linear Models - Logistic regression & Softmax
二分类:Logistic regression 多分类:Softmax分类函数 对于损失函数,我们求其最小值, 对于似然函数,我们求其最大值. Logistic是loss function,即: 在逻 ...
- 一个BADI中实施多个Implementation
转自:https://blog.csdn.net/zhongguomao/article/details/76251407 业务场景:例如我们需要对国家的税率做一个增强,以完成某种业务运算,但是每个国 ...
- delphi 中如何从数据库中读取数据自生成TreeView,只有两个字段,数据库结构如下。急急!!
我的数据库结构如下:UnitId UnitName01 中国 (根节点)0101 河北省(二级树)010101 河北省沧州市(三级树)0101010 ...
- jquery mCustomScrollbar使用
$(".content .desc").mCustomScrollbar({ axis: "y", theme: 'dark', mouseWheel: { e ...
- 反向代理远端 单台tomcat 使用ip+端口
.环境 nginx 10.1.1.161 公网:123.58.251.166 tomcat 10.1.1.103 .tomcat 配置 [root@host---- ~]# netstat -tnlp ...
- jenkins打完包在哪里
查看控制台输出最后面一行是jar包的位置 [JENKINS] Archiving /var/lib/jenkins/jobs/moven-test/workspace/target/projectA- ...
- Entity Framework链接数据库设置
本人不才,学习EntityFramwork同时做个记录供大家参考.不多说,直接上步骤 1.在WebConfig中添加如下代码段 <connectionStrings> <add na ...
- Facebook程序员跳楼事件:技术路线会越走越窄吗?
这是小川的第417次更新,第450篇原创 这几天有个刷屏的文章,讲的是Facebook有位程序员跳楼了,这位程序员的一些信息也"被曝光",比如年轻时是浙大的学霸,后来又赴美读硕,中 ...
- 324rfwrtg5gft8oywtfbserkufgs
324rfwrtg5gft8oywtfbserkufgs (tester.inf.nano)