Sticky布局:
所謂Sticky即css實(shí)現(xiàn)粘性布局，效果是一個(gè)頁面上下兩部分，當(dāng)上半部分高度小的時(shí)候，下半部分處于頁面底部固定位置；當(dāng)上半部分內(nèi)容多超過屏幕高度時(shí)，拖動(dòng)上半部分可以看到下半部分依然處于底部固定位置
應(yīng)用場景
比如這個(gè)場景，不管內(nèi)容多少，你始終需要讓“關(guān)閉的按鈕”在底部固定的位置
餓了么商家公告信息
實(shí)現(xiàn)步驟
- 將頁面高度設(shè)為100%固定( 習(xí)慣把box-sizing設(shè)置為 border-box)
- 上半部分的高度設(shè)置為最小高度100%，至少與頁面同高
- 將上半部分底部需要空出下半部分的高度，將padding-bottom設(shè)置為下半部分的高度
- 下半部分設(shè)置固定寬高后，設(shè)置為絕對定位(為了不占用頁面高度)，目前效果是它本來就處于頁面最底部，超出屏幕；這個(gè)時(shí)候?yàn)榱税阉嵘蟻淼缴弦徊降摹皃adding-bottom”位置，
最關(guān)鍵一步是==> 不要設(shè)置“top或者bottom”值，而是設(shè)置“margin-top= 自身高度”
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
}
#main {
background-color: red;
}
#wrap {
background-color: yellowgreen;
min-height: 100%;
padding-bottom: 150px;
}
#main {
}
#footer {
background-color: yellow;
position: absolute;
margin-top: -150px;
left: 0;
height: 150px;
width: 100%;
}
</style>
</head>
<body>
<div id="wrap">
<div id="main">
近日，微博認(rèn)證“科普醫(yī)生博雅”稱，剛剛看到一個(gè)醫(yī)生寫的帖子：她在云南白藥中草藥牙膏成分中發(fā)現(xiàn)了氨甲環(huán)酸，并指出，這是血液科醫(yī)生常用的止血藥，并且還是處方藥。該話題立即引發(fā)網(wǎng)友議論和猜疑，“難道云南白藥牙膏是中藥負(fù)責(zé)宣傳，西藥負(fù)責(zé)效果？”“云南白藥中草藥牙膏的止血功能是因?yàn)榧尤肓宋魉幊煞郑俊睋?jù)了解，目前由于云南白藥是國家保密配方，雖然其中成分表中簡單寫明了云南白藥，但公眾并不知道它的具體成分。
公開信息顯示，氨甲環(huán)酸又被稱作凝血酸，常在臨床中使用，如出血過多、外科手術(shù)、美白以及血友病患者治療。這種藥物通過與抗纖維蛋白溶酶作用加強(qiáng)抗纖溶作用以達(dá)到輔助止血作用，另外，它也可以通過阻止抑纖維蛋白的分解起到止血作用，纖維蛋白是人體內(nèi)常見的凝血因子。據(jù)介紹，這種主要作用是止血的處方藥有明確的不良反應(yīng)，包括有血栓形成和出血、腹瀉、嘔吐；注射后可有視力模糊、頭痛、頭暈、疲乏等中樞神經(jīng)系統(tǒng)癥狀，雖然很少見但確實(shí)存在。而處方藥的定義是，必須憑執(zhí)業(yè)醫(yī)師或執(zhí)業(yè)助理醫(yī)師處方才可調(diào)配、購買和使用的藥品。
功效牙膏占據(jù)超市貨架主要位置
在昨天的網(wǎng)民大討論中，有醫(yī)生建議普通消費(fèi)者日常使用含氟牙膏防蛀牙就可以了。但是北京青年報(bào)記者走訪超市發(fā)現(xiàn)，含氟牙膏難覓蹤影，貨架上最明顯位置碼放的都是各種功效牙膏，令人眼花繚亂。護(hù)齦的、護(hù)牙周的、美白的、抗敏感的、抗口氣的、修護(hù)牙釉質(zhì)的、清火的……簡直是護(hù)牙功效大比拼，琳瑯滿目，且價(jià)格不菲。其中，舒適達(dá)抗敏牙膏120克的零售價(jià)格35元一支、云南白藥留蘭香牙膏120克的零售價(jià)格24.5元一支、高露潔修護(hù)牙釉質(zhì)牙膏180克的27.9元一支。還有一種西瓜霜精典牙膏200克的最貴，49元一支。北青報(bào)記者注意到，在該款牙膏配料表中顯示，牙膏中含有西瓜霜、三七、黃連等中藥成分，可以減輕牙齦紅腫、出血；護(hù)理牙釉質(zhì)；減輕牙面菌斑形成，減輕牙漬，潔白牙齒。而北青報(bào)記者仔細(xì)尋找后才發(fā)現(xiàn)，最為普通的含氟防蛀牙膏被擺在貨架最低層，每支10元左右。
請問有含氟牙膏嗎？”顧客何先生停留在貨架前面左看右看，研究了半天之后向售貨員發(fā)問，可是售貨員卻說：“我也不知道啊?！睋?jù)何先生說，他們一家三口每人使用的牙膏品種都不一樣，“我媳婦牙齒敏感，她平時(shí)用抗敏牙膏，我閨女愛用美白牙膏，我就使用最普通的那種?！睂τ诠πа栏?，何先生的評價(jià)是除了貴一些，也就那么回事兒。他說，閨女用美白牙膏也沒見她牙齒變白，媳婦用抗敏牙膏，“時(shí)間長了牙齒敏感似乎好一點(diǎn)了，但是好像容易出牙結(jié)石，還得去洗牙，又是花錢。”
口腔醫(yī)學(xué)專家指出，牙齦出血是牙周病，應(yīng)該去看牙醫(yī)，而不是用帶止血藥效果的牙膏。血是止住了，但患者的牙周病還在繼續(xù)，停用了帶止血的牙膏，患者還是會(huì)繼續(xù)出血，長期用可能還會(huì)耽誤口腔疾病的治療?！缎耐鈧髌妗纷髡呃钋宄空f，并不是說云南白藥加了氨甲環(huán)酸它就有效就能用了，手術(shù)過程中氨甲環(huán)酸不能輕易用。要是患者牙齦出血都到了需要用氨甲環(huán)酸的地步，那就早該去看牙醫(yī)了
</div>
</div>
<div id="footer"></div>
</body>
</html>
延伸:從技術(shù)上來看，其實(shí)就是在整個(gè)頁面內(nèi)容小于一個(gè)屏幕高度的時(shí)候，需要底部的部分的position表現(xiàn)為absolute；在整個(gè)頁面內(nèi)容大于一個(gè)屏幕高度的時(shí)候，底部的部分的position表現(xiàn)為relative；其實(shí)目前已經(jīng)有一個(gè)實(shí)驗(yàn)中的新css特性
position:sticky，只是暫時(shí)還未投入使用，兼容性不好
距離頁面頂部大于一定值，表現(xiàn)為 position:relative;
p1.gif
距離頁面頂部小于一定值，表現(xiàn)為 position:fixed;
p2.gif
