好!欢迎访问迷津渡口 现在时间是: 天气 °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
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
nike kobe 10 r酶d
 nike kobe 10 r酶d 2019-03-18 19:57回复
#112
<a href="http://www.randygageteam.com/prezzo-adidas-pr%C3%B8dator-skok">prezzo adidas pr酶dator</a> <a href="http://www.newlouisbag.com/adidas-pr%C3%B8dator-touch-football-boots-obuvi">adidas pr酶dator touch football boots</a> <a href="http://www.thebrandiac.com/converse-negro-cuero-high-tops-mujeres-zapatosl">converse negro cuero high tops mujeres</a> <a href="http://www.isisprojectsa.com/ray-ban-cats-4125-sunglassesh">ray ban cats 4125</a> <a href="http://www.linnwoodpark.com/los-angeles-kings-ccm-nhl-ccm-slouch-cap-hatj">los angeles kings ccm nhl ccm slouch cap</a> <a href="http://www.perfecthostia.com/adidas-yeezy-750-boost-blu-scarpej">adidas yeezy 750 boost blu</a>
nike kobe 10 r酶d http://www.esperteyu.com/nike-kobe-10-r%C3%B8d-skoj
burmamaritime
 burmamaritime 2019-03-18 10:29回复
#111
<a href="http://www.profancyshop.com/nike-lebron-9-elite-white-shoesh">nike lebron 9 elite white</a> <a href="http://www.lmcgroep.com/mujeres-nike-flyknit-roshe-run-todas-blanco-zapatosp">mujeres nike flyknit roshe run todas blanco</a> <a href="http://www.nowaitnails.com/yeezy-boost-550-rosado-zapatosk">yeezy boost 550 rosado</a> <a href="http://www.xmrujo.com/the-north-face-fleece-hoodie-northfaceh">the north face fleece hoodie</a> <a href="http://www.sevenguard.com/dam%C3%A4nner-air-jordan-retro-13-lila-orangen-schuhej">dam盲nner air jordan retro 13 lila orangen</a> <a href="http://www.escortsue.com/nike-air-max-1-kvinders-r%C3%B8d-s%C3%B8lv-skoh">nike air max 1 kvinders r酶d s酶lv</a>
burmamaritime http://www.burmamaritime.com/
kaliteankara
 kaliteankara 2019-03-18 03:51回复
#110
<a href="http://www.matrawildlife.com/nike-flyknit-4.0-wei%C3%9F-schuheh">nike flyknit 4.0 wei脽</a> <a href="http://www.hiyawigs.com/adidas-ultra-boost-red-uncaged-shoesk">adidas ultra boost red uncaged</a> <a href="http://www.fidgefingers.com/nike-air-presto-r%C3%B8d-and-sort-skol">nike air presto r酶d and sort</a> <a href="http://www.lintvan.com/nike-free-5.0-2014-kvinners-gr%C3%A5-rosa-svart-obuvk">nike free 5.0 2014 kvinners gr氓 rosa svart</a> <a href="http://www.pubgdust.com/jordan-12-ovo-nero-scarpei">jordan 12 ovo nero</a> <a href="http://www.ahtantalya.com/femmes-nike-free-run-3-naranja-zapatosh">femmes nike free run 3 naranja</a>
kaliteankara http://www.kaliteankara.com/
hiyawigs
 hiyawigs 2019-03-17 19:05回复
#109
<a href="http://www.poppiesdelray.com/dark-rouge-converse-high-tops-chaussuresl">dark rouge converse high tops</a> <a href="http://www.soundsofbuzz.com/nike-air-force-1-low-femmes-noir-chaussuresl">nike air force 1 low femmes noir</a> <a href="http://www.hozloli.com/2017-air-jordan-11-schwarz-velvet-schwarz-wei%C3%9F-schuhej">2017 air jordan 11 schwarz velvet schwarz wei脽</a> <a href="http://www.privetaustria.com/adidas-protator-1999-schuhei">adidas protator 1999</a> <a href="http://www.goodnnasty.com/nike-air-force-1-high-hvit-pris-obuvj">nike air force 1 high hvit pris</a> <a href="http://www.ankarasanal.com/nike-free-flyknit-chukka-maschio-grigio-blu-scarpel">nike free flyknit chukka maschio grigio blu</a>
hiyawigs http://www.hiyawigs.com/
caryongpum
 caryongpum 2019-03-17 11:10回复
#108
<a href="http://www.myesulix.com/nike-roshe-run-noir-acheter-online-chaussuresg">nike roshe run noir acheter online</a> <a href="http://www.offertborsen.com/nike-flyknit-roshe-run-for-venta-quad-cities-kurpese">nike flyknit roshe run for venta quad cities</a> <a href="http://www.paulawooley.com/nike-kd-8-b%C3%B8rn-gr%C3%B8n-obuva">nike kd 8 b酶rn gr酶n</a> <a href="http://www.yanaena.com/ralph-lauren-match-polo-blue-pink-polox">ralph lauren match polo blue pink</a> <a href="http://www.aquivla.com/kobe-10-rot-blau-schuhed">kobe 10 rot blau</a> <a href="http://www.bobaday.com/jordan-9-low-bleu-scarpec">jordan 9 low bleu</a>
caryongpum http://www.caryongpum.com/
coccodesigns
 coccodesigns 2019-03-15 04:41回复
#107
<a href="http://www.entrustengage.com/zx-flux-rosa-and-svart-kurpesd">zx flux rosa and svart</a> <a href="http://www.frissedenkers.com/nike-air-max-1-royal-negro-rims-obuvf">nike air max 1 royal negro rims</a> <a href="http://www.jauntycouture.com/kvinders-salomon-s-lab-sense-orange-himmelbl%C3%A5-scarpee">kvinders salomon s lab sense orange himmelbl氓</a> <a href="http://www.myshinnies.com/adidas-zx-flux-mesh-wei%C3%9F-butya">adidas zx flux mesh wei脽</a> <a href="http://www.thecreditgods.com/nike-free-run-2-cielo-azul-verde-chaussuresf">nike free run 2 cielo azul verde</a> <a href="http://www.zinoviaenache.com/nike-zoom-winflo-2-kvinners-marinen-butya">nike zoom winflo 2 kvinners marinen</a>
coccodesigns http://www.coccodesigns.com/
unclevirus
 unclevirus 2019-03-14 12:18回复
#106
<a href="http://www.ehomeoclinic.com/denver-broncos-brendan-langley-navy-blue-nike-27-nfl-pullover-hoodie-name-number-logo-nflx">denver broncos brendan langley navy blue nike 27 nfl pullover hoodie name number logo</a> <a href="http://www.geuwompo.com/nfl-brian-allen-mens-elite-royal-blue-jersey-55-los-angeles-rams-nike-alternate-vapor-untouchable-nflw">nfl brian allen mens elite royal blue jersey 55 los angeles rams nike alternate vapor untouchable</a> <a href="http://www.inckua.com/asics-asics-gel-kinsei-2-negro-naranja-chaussuresa">asics asics gel kinsei 2 negro naranja</a> <a href="http://www.infantocursos.com/air-max-zero-mettoutic-or-kit-butya">air max zero mettoutic or kit</a> <a href="http://www.omegaspark.com/nike-kobe-12-bl%C3%A5-gul-butyc">nike kobe 12 bl氓 gul</a> <a href="http://www.radsportland.com/femmes-asics-gel-lyte-5-blanc-noir-obuvf">femmes asics gel lyte 5 blanc noir</a>
unclevirus http://www.unclevirus.com/
cherylblogs
 cherylblogs 2019-03-14 00:35回复
#105
<a href="http://www.imfunniest.com/nike-hypershift-rose-chaussuresj">nike hypershift rose</a> <a href="http://www.emissariesbc.com/m%C3%A4nner-nike-air-max-87-sb-schwarz-grau-gr%C3%BCn-schuhek">m盲nner nike air max 87 sb schwarz grau gr眉n</a> <a href="http://www.partnersspa.com/jj-watt-stitched-jersey-nflh">jj watt stitched jersey</a> <a href="http://www.antirealtor.com/nike-air-presto-camouflage-kvinner-lilla-gr%C3%B8nn-obuvi">nike air presto camouflage kvinner lilla gr酶nn</a> <a href="http://www.jkjuiceplus.com/mens-nike-kyrie-4-grey-shoesj">mens nike kyrie 4 grey</a> <a href="http://www.bkindvending.com/adidas-nmd-runner-vapour-pink-light-onix-shoesl">adidas nmd runner vapour pink light onix</a>
cherylblogs http://www.cherylblogs.com/
batatastudio
 batatastudio 2019-03-13 12:39回复
#104
<a href="http://www.poppiesdelray.com/women-air-jordan-retro-12-low-white-blue-shoesk">women air jordan retro 12 low white blue</a> <a href="http://www.soundsofbuzz.com/nike-air-trainer-huarache-triple-sort-nice-kicks-skoj">nike air trainer huarache triple sort nice kicks</a> <a href="http://www.hozloli.com/m%C3%A4nner-nike-air-max-tailwind-5-grau-gr%C3%BCn-schwarz-schuheh">m盲nner nike air max tailwind 5 grau gr眉n schwarz</a> <a href="http://www.privetaustria.com/adidas-tubular-primeknit-grey-shoesk">adidas tubular primeknit grey</a> <a href="http://www.goodnnasty.com/michael-michael-kors-jet-set-large-east-west-crossbody-mkh">michael michael kors jet set large east west crossbody</a> <a href="http://www.ankarasanal.com/air-jordan-eclipse-lilla-gr%C3%B8nn-obuvi">air jordan eclipse lilla gr酶nn</a>
[url=http://www.batatastudio.com/]batatastudio[/url]
balloonpunkt
 balloonpunkt 2019-03-11 08:01回复
#103
<a href="http://www.cbchispana.com/adidas-springblade-blanco-scarpea">adidas springblade blanco</a> <a href="http://www.ciarahanna.com/nike-lebron-12-gituttio-version-scarpee">nike lebron 12 gituttio version</a> <a href="http://www.finjabacken.com/air-max-1-light-blau-obuvc">air max 1 light blau</a> <a href="http://www.meetingxs.com/nike-blazer-low-gull-scarpea">nike blazer low gull</a> <a href="http://www.ollyknox.com/asics-gel-noosa-tri-9-mujeres-corriendo-zapatos-uk-barato-chaussuresf">asics gel noosa tri 9 mujeres corriendo zapatos uk barato</a> <a href="http://www.sfhires.com/mujeres-nike-air-max-thea-p%C3%BArpura-rojo-kurpese">mujeres nike air max thea p煤rpura rojo</a>
balloonpunkt http://www.balloonpunkt.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸