好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

页面排版框架分享-底部自适应处理

需求

页面排版的重要性毋庸置疑,其中一种情况是:

在页面太短的时候页脚footer出现在可视区的底部,从而撑起整个页面;

在页面足够长的时候让页脚footer出现在页面body的底部,不会覆盖原body的内容。

解决办法

html和body高度设置为100%,页面内容包裹在一个相对定位的.container的div里。

全局最小高度设置为100%,为兼容IE6可使用:

.container {
    min-height: 100%;
    /*ie6不识别min-height,如上下处理*/
    height: auto !important;
    height: 100%;
    position: relative;
}

footer区域为绝对定位,必须设置高度,否则需要利用javascript动态获取高度。

此高度用于保证footer区域不会覆盖body的其他内容,方法是:

footer区域的同级上一个div的padding-bottom设置为高度加上20px,20为footer和内容区的间隔20px:

.page {
    width: 960px;
    margin: 0 auto;
    /*padding等于footer的高度+20px,其中20px为保证两者之间的间隔,自行调整*/
    padding-bottom: 80px;
}
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /*footer的高度*/
    height: 60px;
    background: #6cf;
    clear: both;
}

示例分享

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>迷津渡口-页面框架分享底部自适应处理</title>
	<style type="text/css">
	html,
	body {
		margin: 0;
		padding: 0;
		height: 100%
	}
	
	.container {
		min-height: 100%;
		/*ie6不识别min-height,如上下处理*/
		height: auto !important;
		height: 100%;
		position: relative;
	}
	
	.header {
		background: #ff0;
		padding: 10px;
		margin-bottom: 20px;
	}
	
	.page {
		width: 960px;
		margin: 0 auto;
		/*padding等于footer的高度+20,其中20px为保证两者之间的间隔,自行调整*/
		padding-bottom: 80px;
	}
	
	.footer {
		position: absolute;
		bottom: 0;
		width: 100%;
		/*footer的高度*/
		height: 60px;
		background: #6cf;
		clear: both;
	}
	
	.left {
		width: 220px;
		/*解开以下注释可查看内容高度超过浏览器高度的情况*/
		/*height:1000px;*/
		float: left;
		margin-right: 20px;
		background: lime;
	}
	
	.content {
		background: orange;
		width: 480px;
		float: left;
		margin-right: 20px;
	}
	
	.right {
		width: 220px;
		float: right;
		background: green;
	}
	
	.clearfix:after,
	.clearfix:before {
		content: "";
		display: table
	}
	
	.clearfix:after {
		clear: both;
		overflow: hidden
	}
	
	.clearfix {
		zoom: 1;
	}
	</style>
</head>

<body>
	<div class="container">
		<div class="header">这是头部</div>
		<div class="page clearfix">
			<div class="left">左侧边栏</div>
			<div class="content">内容区</div>
			<div class="right">右侧边栏</div>
		</div>
		<div class="footer">底部区域</div>
	</div>
</body>

</html>

小指才疏学浅,有任何疏漏之处,欢迎不吝赐教~

点赞2
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
thegillssell
 thegillssell 2019-05-17 15:18回复
#203
<a href="http://www.wuxiangtaichi.com/dellin-betances-jersey-nfli">dellin betances jersey</a> <a href="http://www.culdesacmag.com/nike-air-force-one-lunar-hvid-skoq">nike air force one lunar hvid</a> <a href="http://www.livinggreedy.com/cream-ralph-lauren-bag-poloh">cream ralph lauren bag</a> <a href="http://www.clickstroy.com/nike-free-black-sneakers-shoesi">nike free black sneakers</a> <a href="http://www.zotorrent.com/nike-free-huarache-carnivore-black-shoesk">nike free huarache carnivore black</a> <a href="http://www.viptarimas.com/asics-asics-gel-kayano-20-gr%C3%B8nn-obuvq">asics asics gel kayano 20 gr酶nn</a>
thegillssell http://www.thegillssell.com/
stepmompics
 stepmompics 2019-05-17 01:21回复
#202
<a href="http://www.sohbetikiz.com/air-jordan-13-jaune-quartz-sneakerd">air jordan 13 jaune quartz</a> <a href="http://www.akkordiki.com/lebron-12-gris-rouge-schuhee">lebron 12 gris rouge</a> <a href="http://www.torrentslot.com/nike-hyperdunk-2015-flyknit-high-rosa-braun-footf">nike hyperdunk 2015 flyknit high rosa braun</a> <a href="http://www.familycarepc.com/nike-free-run-3.0-v4-dark-bl%C3%A5-gr%C3%A5-skoe">nike free run 3.0 v4 dark bl氓 gr氓</a> <a href="http://www.alizatrade.com/san-jose-sharks-jersey-patch-nflh">san jose sharks jersey patch</a> <a href="http://www.auroragenri.com/mens-chicago-cubs-customized-white-pinstripe-jersey-nfli">mens chicago cubs customized white pinstripe jersey</a>
stepmompics http://www.stepmompics.com/
transitionbh
 transitionbh 2019-05-16 08:46回复
#201
<a href="http://www.magnindesign.com/femminile-nike-huarache-utility-oro-grigio-kurpesd">femminile nike huarache utility oro grigio</a> <a href="http://www.spinecareuk.com/adidas-copper-schwarz-zx-flux-schuhel">adidas copper schwarz zx flux</a> <a href="http://www.danteb.com/nike-zoom-kobe-5-schuhe-dam%C3%A4nner-skof">nike zoom kobe 5 schuhe dam盲nner</a> <a href="http://www.karlisteffy.com/oro-jordan-6-for-vendita-footf">oro jordan 6 for vendita</a> <a href="http://www.festadoano.com/new-blance-620-ni%C3%B1os-gris-oro-sneakerd">new blance 620 ni帽os gris oro</a> <a href="http://www.bursagti.com/dam%C3%A4nner-nike-air-rejuven8-mule-rot-grau-schuhef">dam盲nner nike air rejuven8 mule rot grau</a>
transitionbh http://www.transitionbh.com/
viaggivaldata
 viaggivaldata 2019-05-15 10:29回复
#200
<a href="http://www.dastforoush.com/adidas-superstar-2-oro-negro-zapatosk">adidas superstar 2 oro negro</a> <a href="http://www.etxekalte.com/north-face-osito-brown-jacket-northfaceh">north face osito brown jacket</a> <a href="http://www.tumbhimall.com/adidas-originals-superstar-rosa-stripes-schuhek">adidas originals superstar rosa stripes</a> <a href="http://www.formulaforfun.com/nike-blazer-mid-metric-royal-bl%C3%A5-skoi">nike blazer mid metric royal bl氓</a> <a href="http://www.icallvoters.com/noir-and-bleu-nike-free-5.0-chaussuresh">noir and bleu nike free 5.0</a> <a href="http://www.megadomenl.com/florida-state-seminoles-new-era-ncaa-youth-shadow-turn-9forty-cap-hatl">florida state seminoles new era ncaa youth shadow turn 9forty cap</a>
viaggivaldata http://www.viaggivaldata.com/
womens nike sd shoes
 womens nike sd shoes 2019-05-14 17:06回复
#199
<a href="http://www.sahafatona.com/injury/exclusivo-jaqueta-mcd-core-is-raw-black-r-599">exclusivo jaqueta mcd core is raw black r 599</a><a href="http://www.sahafatona.com/instead/boina-ver%c3%a3o-masculina-azul-compre-com-quem-%c3%a9-especialista-no">boina ver茫o masculina azul compre com quem 茅 especialista no</a><a href="http://www.sahafatona.com/instinct/comprar-ed-hardy-caps-ed-hardy-ropa">comprar ed hardy caps ed hardy ropa</a><a href="http://www.sahafatona.com/intelligence/chapeu-americano-rodeio-cowboy-cowgirl-mundocountry-country-amochapeu-usochapeu-turmadochapeu-comitiva-amorodeio-festadopeao-cavalgada-dallas">chapeu americano rodeio cowboy cowgirl mundocountry country amochapeu usochapeu turmadochapeu comitiva amorodeio festadopeao cavalgada dallas</a>
womens nike sd shoes http://www.songlyricsa2z.com/initiate/womens-nike-sd-shoes
magellantt
 magellantt 2019-05-14 13:11回复
#198
<a href="http://www.adanastarpen.com/nike-sb-stefan-janoski-max-rosa-bl%C3%A5-obuvi">nike sb stefan janoski max rosa bl氓</a> <a href="http://www.actconfident.com/adidas-zx-900-blu-grigio-scarpej">adidas zx 900 blu grigio</a> <a href="http://www.erzurumihl.com/nike-air-max-97-womens-purple-red-shoesh">nike air max 97 womens purple red</a> <a href="http://www.candctowingil.com/air-jordan-retro-2-hombresta-verde-p%C3%BArpura-zapatosp">air jordan retro 2 hombresta verde p煤rpura</a> <a href="http://www.onlysidekick.com/kobe-9-low-azul-zapatosk">kobe 9 low azul</a> <a href="http://www.rmmassage.com/north-face-yellow-ski-jacket-northfaceh">north face yellow ski jacket</a>
magellantt http://www.magellantt.com/
maytorrent
 maytorrent 2019-05-13 00:39回复
#197
<a href="http://www.teddevans.com/adidas-projoator-remake-zapatosh">adidas projoator remake</a> <a href="http://www.cateycontrols.com/adidas-climacool-ride-v-m%C3%A6nd-sapphire-bl%C3%A5-hvid-skok">adidas climacool ride v m忙nd sapphire bl氓 hvid</a> <a href="http://www.prodomfactory.com/nike-air-flight-89-mennns-hvit-gr%C3%A5-obuvi">nike air flight 89 mennns hvit gr氓</a> <a href="http://www.tonyaespinoza.com/nike-internationalist-azul-rectodas-zapatosl">nike internationalist azul rectodas</a> <a href="http://www.nemagrp.com/ray-ban-rb4167-sunglasses-havana-frame-deep-brown-gradient-lens-sunglassesh">ray ban rb4167 sunglasses havana frame deep brown gradient lens</a> <a href="http://www.viajesclic.com/new-york-yankees-47-mlb-core-47-clean-up-cap-hatj">new york yankees 47 mlb core 47 clean up cap</a>
maytorrent http://www.maytorrent.com/
mustberavi
 mustberavi 2019-05-11 04:07回复
#196
<a href="http://www.avantajreyonu.com/m%C3%A6nd-mizuno-ignitus-4-orange-sort-skoi">m忙nd mizuno ignitus 4 orange sort</a> <a href="http://www.oranjeskishop.com/air-max-thea-nike-blanc-chaussuresh">air max thea nike blanc</a> <a href="http://www.johannafrost.com/nfl-snapback-new-era-hatl">nfl snapback new era</a> <a href="http://www.rolandviet.com/adidas-zx-flux-rouge-blanc-noir-chaussuresh">adidas zx flux rouge blanc noir</a> <a href="http://www.classmedya.com/adidas-originals-stan-smith-blanco-negro-trainers-zapatosk">adidas originals stan smith blanco negro trainers</a> <a href="http://www.anteageserums.com/nike-cortez-blue-purple-shoesj">nike cortez blue purple</a>
mustberavi http://www.mustberavi.com/
imfunniest
 imfunniest 2019-05-10 18:39回复
#195
<a href="http://www.seesoshow.com/oregon-ducks-nike-hat-hath">oregon ducks nike hat</a> <a href="http://www.crypolio.com/nike-internationalist-army-vert-chaussuresh">nike internationalist army vert</a> <a href="http://www.vtrvideo.com/nike-sb-dunk-low-pro-noir-blanc-gum-chaussuresj">nike sb dunk low pro noir blanc gum</a> <a href="http://www.asoseinhalb.com/schwarz-and-wei%C3%9F-adidas-neo-schuhek">schwarz and wei脽 adidas neo</a> <a href="http://www.handydgh.com/yankees-2-derek-jeter-white-strip-usa-flag-fashion-stitched-mlb-jersey-nflh">yankees 2 derek jeter white strip usa flag fashion stitched mlb jersey</a> <a href="http://www.blakefanz.com/olive-gr%C3%B8nn-adidas-tubular-radial-obuvi">olive gr酶nn adidas tubular radial</a>
imfunniest http://www.imfunniest.com/
livefreshpbc
 livefreshpbc 2019-05-10 12:46回复
#194
<a href="http://www.kaliteankara.com/herren-nike-air-max-bw-blau-gr%C3%BCn-schuheh">herren nike air max bw blau gr眉n</a> <a href="http://www.bagsbeat.com/nike-free-run-2-men-black-yellow-shoesk">nike free run 2 men black yellow</a> <a href="http://www.lolalolincoln.com/nike-lunar-force-1-alle-hvid-skol">nike lunar force 1 alle hvid</a> <a href="http://www.buycharboleps.com/air-jordan-retro-10-hvit-bl%C3%A5-oransje-obuvk">air jordan retro 10 hvit bl氓 oransje</a> <a href="http://www.androidsmith.com/grigio-adidas-basketbtutti-scarpe-scarpei">grigio adidas basketbtutti scarpe</a> <a href="http://www.oheyewear.com/nike-hypervenom-phelon-ii-tc-tf-verde-negro-zapatosh">nike hypervenom phelon ii tc tf verde negro</a>
livefreshpbc http://www.livefreshpbc.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸