网站设计:将Footer固定在浏览器底部
在设计网站的时候,如果你某个页面的内容没有满屏,那你的footer会离浏览器底部很远,整体看起来很难看,这里用JavaScript提供一种方法来将footer固定在浏览器底部。
function fixFooter(){
var mainHeight = document.getElementById('main').offsetHeight;
var height = document.documentElement.clientHeight
- document.getElementById("header").offsetHeight
- document.getElementById("footer").offsetHeight;
if(mainHeight < height ){
document.getElementById('main').style.height= height + "px";
}
}
其中,main是你网页内容的id,header是菜单的id,footer是footer的id。当网站内容的高度小于多少时,那么获取header和footer的高度,并用document.documentElement.clientHeight减去他们,剩下的就是main的高度。
但是当你运行代码的时候,你会发现footer先是离底部有点距离,然后才到底部的,这样看起来很难看,可以加上下面语句隐藏这个过程,使得网页一打开footer就在底部。
document.getElementById('main').style.overflow="hidden";
我们可以通过JavaScript获取很多关于浏览器的属性,这里列出各个属性的获取及其含义。
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
当然,如果你想让footer一直在浏览器底部,那么可以通过CSS来解决
#footer{
position
:
fixed
;
right
:
0
;
left
:
0
;
z-index
:
1030
;
bottom
:
0
;
margin-bottom
:
0
;
}
这里再提供一种方法:完全通过css达到的。
<
footer
class
=
"footer"
>
<
div
class
=
"container"
>
</
div
>
</
footer
>
html {
position
:
relative
;
min-height
:
100%
;
}
body {
margin-bottom
:
60px
;
}
.footer {
position
:
absolute
;
bottom
:
0
;
width
:
100%
;
height
:
60px
;
background-color
:
#f5f5f5
;
}
.container {
width
:
auto
;
max-width
:
680px
;
padding
:
0
15px
;
}
.container .text {
margin
:
20px
0
;
}
网站设计:将Footer固定在浏览器底部的更多相关文章
- 让footer固定在页面底部(CSS-Sticky-Footer)
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
- 如何让你的 footer 总是在浏览器底部无论什么分辨率无论什么浏览器?
一个可以用的CSS驱动的可粘在底部的Footer 我们曾经都或多或少的试过用CSS来把Footer固定在底部的经理,但是他们总是不能正常的粘在底部,不是吗?可喜的是,痛苦的研究如何让footer粘在底 ...
- Footer固定在页面底部(CSS)
<style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...
- 在不适用fixed的前提下,当内容较少时footer固定在页面底部
使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- 让footer固定在页面(视口)底部(CSS-Sticky-Footer)
让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- css固定footer到浏览器底部的方法
<html> <head></head> <body> <div class="page-wrapper"> <d ...
随机推荐
- JQuery开始
JQuery jq的选择器 等等(网页的连接:http://www.runoob.com/jquery/jquery-ref-selectors.html) 事件: hover中有俩参数(mousee ...
- 【译】宣告推出.NET Core 3.0 Preview 7(英雄的黎明)
今天,我们宣布推出.NET Core 3.0 Preview 7.我们已经从创建新特性阶段过渡到了完善版本阶段.对于其余的预览版,我们将把重点放在质量(改进)上. 在Windows,macOS和Lin ...
- CSS(下)
1.CSS边框 边框属性: 1.border-width 宽度 2.border-style 样式 none 无边框 dotted 点状虚线边框 dashed 矩形虚线边框 solid 实线边框 3. ...
- 分析了京东内衣销售记录,告诉你妹子们的真Size!
>今天闲暇之余写了一个爬虫例子.通过爬虫去爬取京东的用户评价,通过分析爬取的数据能得到很多结果,比如,哪一种颜色的胸罩最受女性欢迎,以及中国女性的平均size(仅供参考哦~) 打开开发者工具-n ...
- 算法-一步步教你如何用c语言实现堆排序(非递归)
看了左神的堆排序,觉得思路很清晰,比常见的递归的堆排序要更容易理解,所以自己整理了一下笔记,带大家一步步实现堆排序算法 首先介绍什么是大根堆:每一个子树的最大值都是子树的头结点,即根结点是所有结点的最 ...
- java连接mysql数据库jdbc
jdbc.driver = com.mysql.jdbc.Driverjdbc.url = jdbc:mysql://localhost:3306/数据库名jdbc.username = rootjd ...
- react项目建立导入包问题总结
1.react和react-dom包 使用react开发网页的话,我们难免会下载两个包,一个是react,一个是react-dom,其中react是react的核心代码.react的核心思想是虚拟Do ...
- 【iOS】NSLog 打印 BOOL 类型值
这个问题以前没在意,刚偶然打印,发现有些问题,上网查了下,发现是这么搞的: NSLog(@"%@", isEqual?@"YES":@"NO" ...
- Java的几种常见排序算法
一.所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作.排序算法,就是如何使得记录按照要求排列的方法.排序算法在很多领域得到相当地重视,尤其是在大量数据的处理方面. ...
- 转载:MyBatis mapper.xml中使用静态常量或者静态方法
转自:https://my.oschina.net/wtslh/blog/682704 今天偶然之间刷到了这样一篇博客,有点意外 mybatis 还可以这样使用ONGL常量的方式,该方式针对 xml的 ...