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部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
随机推荐
- centos6.5安装mysql(转载,亲测可用)
如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.eclipse的安装(这个在之前的一篇随笔中已经有详细讲解了Linux学习之CentOS(七)--Cen ...
- php+mysql模糊查询功能
一般模糊查询语句如下: SELECT 字段 FROM 表 WHERE 某字段 Like 条件 其中关于条件,SQL提供了四种匹配模式: 1,% :表示任意0个或多个字符.可匹配任意类型和长度的字符,有 ...
- Git报错: OpenSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
在使用Git来克隆仓库报了错误,如下: fatal: unable to access ‘https://github.com/xiaobingchan/machine_learn/‘: OpenSS ...
- cached占比过高
Linux手动释放缓存的方法Linux释放内存的命令:syncecho 1 > /proc/sys/vm/drop_caches drop_caches的值可以是0-3之间的数字,代表不同的含义 ...
- [转]MySQL 中 You can't specify target table '表名' for update in FROM clause错误解决办法
原文链接:https://blog.csdn.net/qq_29672495/article/details/72668008
- jQuery.fn.extend与jQuery.extend的区别
jquery 本身并不提供 jQuery.color() 这个方法,如果我们需要对jQuery本身提供的方法进行扩展,则我们就需要是用jQuery.fn.extend: jQuery.fn.exten ...
- Scala使用备注一
package com.ws.spark.study.scala import java.io.File import org.scalatest.FlatSpec import scala.io.S ...
- Flutter中通过循环渲染组件
class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...
- 【并行计算-CUDA开发】英伟达硬件解码器分析
这篇文章主要分析 NVCUVID 提供的解码器,里面提到的所有的源文件都可以在英伟达的 nvenc_sdk 中找到. 解码器的代码分析 SDK 中的 sample 文件夹下的 NvTranscoder ...
- when i import skimage,it occurred --"cannot import name '_validate_lengths'"
how to sovle this prolem? 1)with the administrator user to run cmd 2)imput and run : pip install --u ...