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部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...
随机推荐
- VBA添加下拉菜单
Sub createMenus() Dim cmdBar As CommandBar Dim cmdMenu As CommandBarPopup Dim cmdBtn As CommandBarBu ...
- MySQL 慢查询日志介绍
转: MySQL 慢查询日志介绍 2018年08月23日 08:47:40 曾梦想仗剑走天涯XX 阅读数 1104 一. 慢查询介绍 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记 ...
- C++ nth_element greater
#include <iostream>#include <algorithm>#include <deque>#include <vector>#inc ...
- Qt编写数据可视化大屏界面电子看板4-布局另存
一.前言 布局另存是数据可视化大屏界面电子看板系统中的额外功能之一,主要用于有时候用户需要在现有布局上做个微调,然后直接将该布局另存为一个布局配置文件使用,可以省略重新新建布局重新来一次大的调整的工作 ...
- process.env.NODE_ENV
Node 随记 if (process.env.NODE_ENV === 'production') { module.exports = require('./prod.js') } else { ...
- Canal——写入到ES中数据错乱
问题描述 使用canal-adapter写入elasticSearch数据时,数据是写入了elasticSearch了,但出现了mysql表中的数据和elasticSearch中索引中的数据错乱的问题 ...
- Spring Boot中报错org.apache.ibatis.binding.BindingException: Parameter 'XXXX' not found. Available parameters are [0, 1, param1, param2]的解决办法
我这里的报错信息显示: org.apache.ibatis.binding.BindingException: Parameter 'reqUsername' not found. Available ...
- axios二次封装的几种方法
一.用Class方法 import axios from "axios"; declare var Promise: any; export class Request { sta ...
- solr后台操作Documents之增删改查
偶尔会用到solr后台操作一些数据,比如测试等一些情况.但具体用的时候可能会忘记,或者搜的时候结果不全,在此略详细的记一下. 1.添加 {"id":6,"title&qu ...
- XSSFWorkbook对象 进行zip打包时 用write资源流自动关闭处理办法
XSSFWorkbook对象的write方法内会将传入的资源流自动关闭 导致下载excel失败 错误代码 OutputStream out = response.getOutputStream(); ...