不管页面内容是不是占满一屏,footer都保持在最底部

直接上代码:

<style>
*{ margin:0; padding:0}
#container{background:#33CCFF}
#footer{background:#FFCC00;width:100%;}
</style>
<div id="container"> 5416416410</div>
<div id="footer">bottom</div>
<script language="JavaScript" type="text/javascript">
function test(){
var infoHeight = document.getElementById("container").scrollHeight;
var bottomHeight = document.getElementById("footer").scrollHeight;
var allHeight = document.documentElement.clientHeight;

var bottom = document.getElementById("footer");
if((infoHeight + bottomHeight) < allHeight){
bottom.style.position = "absolute";
bottom.style.bottom = "0";
}else{
bottom.style.position = "";
bottom.style.bottom = "";
}

setTimeout(function(){test();},10);
}
test();
</script>

时间: 2024-10-10 22:14:28

不管页面内容是不是占满一屏,footer都保持在最底部的相关文章

页面内容不足以铺满屏幕高度时,footer居底显示

在项目中常常会遇到这样的问题:页面主要内容不足以铺满一个屏幕的高度,footer下面就会有白块剩余. 现在要实现的效果就是,在主要内容不足以铺满整个屏幕的情况下,footer居于屏幕低部显示,使得整个页面占满屏幕.而当主要内容高度大于整个屏幕高度的时候,footer跟随主要内容进行显示: 方法一: html [html] view plain copy <div class="page"> 主要页面 </div> <footer>底部</foo

关于 web 页面 占满全屏

页面一般可以分成三部分,头部,底部,中间内容部分. 一般不用考虑中间高度部分,因为可以靠内容撑开,然后让底部到达底部.但是当中间内容太少时,底部就会顶不到底部. 方法1.中间部分给一个最小高度(min-height = 100vh - 头部高度 - 底部高度). 1 header, 2 footer { 3 height: 100px; 4 background-color: #234abc; 5 color: #ffffff; 6 } 7 8 .content { 9 min-height:

H5页面内容较少时如何让页面全屏在手机显示呢

解决方案1: 设置如下:html,body{ min-height:100vh; background-color:#fff; }这样高度首先不会写死,而且满足最小高度是满屏 解决方案2: 可以用vh和vw来布局.100vh和100vw就是你设备的高度和宽度.先把外面盒子固定下来,所有的盒子的高度加起来等于100vh刚好占满一屏这样就不会有空白.像你这种盒子比较少的可以用js获取设备的高度和宽度,然后用js设置盒子的高度,加起来等于你设备的高度就可以了.字体大小用rem表示.相对于根字体的大小.

页面内容不够高footer始终位于页面的最底部

相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来控制content中间内容区高度来让页面高度能够占满显示屏一屏,但是大型网站页面比较多的情况下footer都是模块化添加进去的,每个页面高度都不会一样,不可能去设置每个页面中间内容区min-height高度,而且用户的显示屏的大小都不一样,无法精确设置min-height高度,无法保证用户看到页面页

将页面内容当成弹框进行显示

注:必须使用相对应版本的jquery mobile css.不然无法正常显示 1 <div data-role="page" id="pageone"> 2 <div data-role="header" > 3 <h1>头部</h1> 4 </div> 5 <div role="main" > 6 <a href="#pagetwo&qu

页面内容小于一屏时仍能头部在头部尾部在尾部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面内容小于一屏时仍能头部在头部尾部在尾部</title> <style> *{ padding:0; margin:0; text-align:center; } /* html, body {height: 100%;}*/ header{

转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏

在Web开发中我们经常要碰到这样的问题:在为一个页面设置背景图片之后往往希望图片能够在分辨率比较大的情况下水平垂直都居中显示.通常水平居中显示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧: 1. 首先为了能使得网站能够根据浏览器大小自适应,我们需要将页面的body元素height值设为100%,而在这之前,我们需要将xhtml验证从网站头删除.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

C#1(.net和C#的关系、VS与.net的对应关系、VS2012常用的几种应用程序、C#定义一个类的方法、类页面内容的解释、定义Person的类、调用Person类的方法、命名规范、数值类型)

1..net和C#的关系 .net是一个开发平台,C#是应用在.net平台上的一种语言.   2.VS与.net的对应关系  3.VS2012常用的几种应用程序 第一种是Windows窗体应用程序,也即是我们常用的C/S端的应用软件: 第二种是控制台应用程序,主要是用来学习调试C#代码的(老师上课应用的模式): 第三种是空Web应用程序,建立空的网页模式,B/S模式: 第四种是Web 窗体应用程序,建立后会生成一些常用的网页组件和功能,例如JS.image等,也是B/S模式. 4.C#定义一个类

linux系统inode占满故障处理

Linux系统inode占满故障处理 众所周知,文件系统中inode编码是指向磁盘block的唯一编号,若服务器遭入侵或日志文件将磁盘inode资源编号耗尽,新数据无法获取inode编号导致无法存储.举例说明:在磁盘中/boot独立分区中查看现有inode资源并通过for循环创建大量文件占用耗尽inode编号,导致磁盘无法写入内容,最后进行处理故障. [[email protected] ~]#  df -i /boot/                                 #查看i