php架在底部页面,页脚始终保持在页面底部的网页布局方法

页脚始终保持在页面底部的网页布局方法

导语:用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事。下面就由百分网小编为大家介绍一下页脚始终保持在页面底部的网页布局方法,希望对大家能有所帮助。

步骤:

1、为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding。顺便提一下,经过我的测试,html 和 body 的 height: 100%; 等于整个浏览器窗口的总高度,无论内容是否超过一屏。而它们下一级子元素 height: 100%; 则等于第一屏的.高度。如何,是不是有点不好理解?

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

}

2、因为上面提到的问题,所以为了让布局自适应高度,我们要加上 min-height: 100%;,虽然IE不支持这个属性但是IE的 height: 100%; 有同样的作用:

#wrapper {

min-height: 100%;

}

* html #wrapper {

height: 100%;

}

这样,一个最简单的最小高度满一屏的自适应布局就做好了。为了便于查看,我加了一些宽度和背景色修饰,如下:

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

text-align: center;

font: 12px/1.4 Verdana, sans-serif;

background: #f00;

}

#wrapper {

width: 770px;

min-height: 100%;

background: #ccc;

margin: auto;

text-align: left;

}

* html #wrapper {

height: 100%;

}

jzxue.com-建站学

/*

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

text-align: center;

font: 12px/1.4 Verdana, sans-serif;

background: #F00;

}

#wrapper {

width: 770px;

min-height: 100%;

background: #ccc;

margin: auto;

text-align: left;

}

* html #wrapper {

height: 100%;

}

#header {

background: Green;

height: 40px;

}

#sidebar {

float: left;

width: 200px;

background: Gray;

}

#content-box {

float: right;

width: 570px;

background: Olive;

}

#footer {

height: 50px;

background: Background;

width:770px;

margin: auto;

}

/*]]>*/

此处显示  id "content-box" 的内容

【页脚始终保持在页面底部的网页布局方法】相关文章:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/558506.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pgsql 前10条_未来3年,广州83条城中村、285个旧街区将迎来改造

文、图/羊城晚报全媒体记者 赵燕华 通讯员 穗建未来3年,广州83条城中村将实施改造,285个旧街区将迎来改造,推进176个旧厂房改造,将整治1.24亿平方米违建……9月25日,在广州市深化城市更新工作推进高质量发展政策培训暨…

Linux版本Oracle工具,Linux下oracle可视化操作工具sqldeveloper安装与配置

一、Oracle SQL Developer 3.2.2 选择Linux RPM版本下载1、安装sqldeveloper,rpm -ivh sqldeveloper-3.2.20.09.87-1.noarch.rpm,安装完成后软件在/opt/sqldeveloper, 虽然在程序菜单中有sql-developer的图标,但单击并不能启动,估…

c++能干什么_「CG原画插画教程」学画画到底能干什么?

原标题:「CG原画插画教程」学画画到底能干什么?艺学绘小编收集整理了学画画到底能干什么?学画画到底能干什么?相信很多学画画的朋友们都被问过这个问题,那些对学画画有偏见的人,总觉得我们在“不务正业”。…

查看oracle空间使用率,Oracle 查看表空间使用率

1.查询不包含临时表空间的使用率SELECT Upper(F.TABLESPACE_NAME) "TablespaceName",D.TOT_GROOTTE_MB "Total(M)",D.TOT_GROOTTE_MB - F.TOTAL_BYTES "Used(M)",To_char(Round(( D.TOT_GROOTTE_MB - F.TOTAL_BYTES ) / D.TOT_GROOTTE_MB * 100,…

怎样设置电脑壁纸_怎样设置电脑的资料定时备份到移动硬盘里

怎样设置电脑的资料定时备份到移动硬盘里 写回答...安装FreeFileSync即可,功能有:自动备份、单向备份、双向备份、更新指定文件夹、增量更新、定时备份等。你安装后,添加一个批处理任务来执行将电脑的资料定时备份到移动硬盘。选:…

packetbeat oracle,packetbeat 无法启动

抓到了一些包,但是没有看到视频中的http的包:都是些UDP2018/08/12 10:46:27.756161 sniffer.go:145: INFO Resolved device index 1 to device: \Device\NPF_{5E472DB4-3BFB-4696-A0DF-4A1BA12EBEB3}2018/08/12 10:46:27.812161 beat.go:233: INFO packe…

appium自动化测试_Appium自动化测试入门教程No.1—— Appium介绍

(1)特点appium 是一个自动化测试开源工具,支持 iOS 平台和 Android 平台上的原生应用,web应用和混合应用。>>“移动原生应用”是指那些用iOS或者 Android SDK 写的应用(Application简称app)。>>“移动web应用”是指使用移动浏览器访问的应用…

linux 命令行看图片,骚操作:用终端打开图片

导读Linux 上有许多 GUI 图片浏览器。但我尚未听说或使用过任何在终端中显示图片的应用程序。幸运的是,我刚刚发现了一个可用于在终端中显示图像的名叫 FIM 的图像查看器。FIM 引起了我的注意,是因为与大多数 GUI 图片浏览器相比,它非常轻巧。…

python中使用什么命令进入帮助系统-python中os模块中文帮助

python中os模块中文帮助文档 文章分类:Python编程 python中os模块中文帮助文档 翻译者:butalnd 翻译于2010.1.7——2010.1.8,个人博客:http://butlandblog.appspot.com/ 注此模块中关于unix中的函数大部分都被略过,翻译主要针对WI…

linux 登入用户记录,linux记录所有用户登陆及执行过的命令脚本

第一个窗口[roothdss7-4 ~]# echo "historyUSERwhoamiUSER_IPwho -u am i 2>/dev/null| awk {print $NF}|sed -e s/[()]//gif [ "$USER_IP" "" ]; thenUSER_IPhostname ## 获取ip 并且存到变量中fiif [ ! -d /var/log/history ]; thenmkdir /var/…

线程被中断跟被阻塞有什么区别_宠物加盟店跟自营店有什么区别

宠物加盟店跟自营店有什么区别开宠物店是一个很有发展、很有市场前景的项目,特别是在这几年,已经迅猛发展。如果想加入宠物行业,利润、赚钱、前景都不用担心,只要有愿意做成的心,市场大环境不用担心。关于大家提出的宠…

linux装nvidia驱动没有图形界面,[转]Fedora 13下安装Nvidia显卡驱动的方法/Linux无法进入X Windows 图形界面的解决方法...

再试一试这个方法:[转自]http://www.myexception.cn/image/505352.htmlVirtualBox3.1.2安装Fedora12后无法启动图形界面问题VirtualBox真是个好东东,无缝模式集成进windows,一边能玩windows下的游戏啊,QQ啊,又可以不耽…

不超过20位的小数正则_意甲身价最贵的20位球星,国米多达7人超过尤文,夺冠成硬任务...

根据《德转网》的最新统计,在本赛季意甲身价排名前20位的球星当中,国际米兰俱乐部拥有多达7人,比起意甲霸主尤文图斯还要多出2人。这7位国米球星分别是卢卡库(意甲球员身价第一,8000万欧元)、马丁内斯(意甲球员身价第四、4000万欧…

mcp证书有什么用_建造师的行情怎么样呢?建造师证书有什么用?

近年来,一二级建造师报名人数的逐年递增。从2004年至今,从当初几万人报考到现在的几百万人报考,这些都说明了大家都意识到了建造师证书的重要性。因为要用到证书的地方太多了,建筑企业升级资质要求建造师证书、企业年检要求建造师…

linux环境变量命名规范,Linux就该这么学 -- 重要的环境变量

变量是计算机系统用于保存可变值的数据类型。在Linux中,变量名一般都是大写,这是一种约定俗成的规范,我们可以直接通过变量名称来提取到对应的变量值。用户执行一条命令,Linux系统一般分为4个步骤第一步:判断用户是否以…

realtek audio console无法连接rpc服务_RPC服务在游戏中的简单运用

作者:二周目赤出处:https://www.cnblogs.com/cr1719/p/13866841.html我们最开始做的游戏框架,多数都是client—>server—>db的模式,但是随着玩家数量的增加,一个server进程就会扛不住,需要多个进程服务于多个玩家。但是给定…

linux查询.gz日志,linux2-查日志

1.tail 显示文件内容的最后几行tail catalina.out查最后10行tail -f filename输出最后10行内容,同时监视文件的改变,只要文件有一变化就显示出来。tail -n 5 filename 或者 tail -5 filename输出文件最后5行的内容tail -nf catalina.out输出文件最后n行的…

linux qt yuv,c – 如何使用Qt中的RGBA32数据将带有YUV数据...

我找到了一个内置于Qt5的解决方案,但是不受Qt的支持.以下是如何进行的:>将QT multimedia-private放入qmake .pro文件中>将#include“private / qvideoframe_p.h”放入代码中以使该功能可用.>您现在可以访问具有以下签名的函数:QImage qt_image…

union all会影响性能吗_哪些因素会影响悬臂式掘进机的性能?

悬臂式掘进机性能的好坏是决定快速掘进的关键,已有成果的基础上,对影响悬臂式掘进机性能的主要因素进行了综合分析。下面小编就具体说明一下:1.截割头、截齿的影响因素截齿是掘进机的关键部件,其材料和制造技术对悬臂式掘进机的性…

自制简单的小型Linux,自制小型Linux系统

<div id”content” contentScore”949″>自制小型Linux系统【详细步骤】1&#xff1a;找一个新的SCSI接口的Hard Disk 装载到Linux虚拟机上(/dev/sdb),加电。fdisk /dev/sdb 进行分区&#xff0c;格式化。2&#xff1a;建立2个挂载点,并分别挂载。3&#xff1a;构建MBR引…