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部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
随机推荐
- JAVA 基础编程练习题17 【程序 17 猴子吃桃问题】
17 [程序 17 猴子吃桃问题] 题目:猴子吃桃问题:猴子第一天摘下若干个桃子,当即吃了一半,还不瘾,又多吃了一个 第二天早上又 将剩下的桃子吃掉一半,又多吃了一个.以后每天早上都吃了前一天剩下的一 ...
- 常用CSS媒体查询
@media screen and (orientation: portrait) { /*竖屏 css*/} @media screen and (orientation: landscape) { ...
- [Python[PyQt]] ModuleNotFoundError: No module named 'PyQt5.QtWebEngineWidgets'
解决办法: pip install PyQtWebEngine
- truffle init Error:连接不到github网址
问题描述: 输入truffle init 输出 Error: Error making request to https://raw.githubusercontent.com/truffle-box ...
- 通过bat批处理程序如何实现在多个txt文件后面加上相同的一行文字
通过bat批处理程序如何实现在多个txt文件后面加上相同的一行文字 set/p a=输入要增加的文字 for /f "delims=" %%i in ('dir /b *.txt' ...
- 前端contentType数据传输格式与ajax技术
前端数据格式contentType参数 前后端传输数据的编码格式 1.urlencoded(form表单与ajax默认的数据提交编码格式) 数据格式 name=' django后端识别到urlenco ...
- java学习(东软睿道)2019-09-06(预课)《随堂笔记》
2019-09-06 13:19:56 1.变量:java 名称 2.服务器server 客户端client uft8 ascll 3.Java ...
- 粒子群算法(PSO)
这几天看书的时候看到一个算法,叫粒子群算法,这个算法挺有意思的,下面说说我个人的理解: 粒子群算法(PSO)是一种进化算法,是一种求得近似最优解的算法,这种算法的时间复杂度可能会达到O(n!),得到的 ...
- Centos7下,宿主机nginx配合docker环境的php-fpm
一.安装docker并启动 yum install docker systemctl start docker 二.安装nginxCentOS 7默认不能从yum中安装nginx,原因可以自己搜索一下 ...
- Python基础『一』
内置数据类型 数据名称 例子 数字: Bool,Complex,Float,Integer True/False; z=a+bj; 1.23; 123 字符串: String '123456' 元组: ...