三列布局的問題

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
       body{margin: 0;padding:0;}
       header{position: fixed;top:0; height: 100px;width: 100%;background-color: #ddd;overflow: auto;}
       main{position: absolute;top:100px;bottom:100px;overflow: auto; }
       .content{height: 1000px;}
       footer{position: fixed;bottom: 0;height: 100px;width: 100%;background-color: #ddd;}
    </style>
</head>
<body>
    <header>Header</header>
    <main><div class="content"> Main content</div></main>
    <footer>Footer</footer>
</body>
</html>```
Q1:上面代碼會導致這個奇怪的問題纺蛆,什么情況?规揪?

![](http://upload-images.jianshu.io/upload_images/316258-5c004d5191f699ba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
body{margin: 0;padding:0;}
header{position: fixed;top:0; height: 100px;width: 100%;background-color: #ddd;overflow: auto;}
main{position: absolute;top:100px;bottom:100px;overflow: auto;height: 1000px;}
footer{position: fixed;bottom: 0;height: 100px;width: 100%;background-color: #ddd;}
</style>
</head>
<body>
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>
</body>
</html>```
Q2:上面代碼使main的滾輪貫穿header和footer桥氏,如何使其只在main中出現(xiàn)滾輪?猛铅?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末字支,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子奸忽,更是在濱河造成了極大的恐慌蝌箍,老刑警劉巖慷彤,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異酗失,居然都是意外死亡策橘,警方通過查閱死者的電腦和手機傍睹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門沛硅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缕题,“玉大人,你說我怎么就攤上這事腌歉⊥芾遥” “怎么了?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵翘盖,是天一觀的道長。 經(jīng)常有香客問我凹蜂,道長馍驯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任玛痊,我火速辦了婚禮汰瘫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘擂煞。我一直安慰自己混弥,他們只是感情好,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布对省。 她就那樣靜靜地躺著蝗拿,像睡著了一般。 火紅的嫁衣襯著肌膚如雪蒿涎。 梳的紋絲不亂的頭發(fā)上哀托,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天,我揣著相機與錄音劳秋,去河邊找鬼仓手。 笑死胖齐,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的嗽冒。 我是一名探鬼主播呀伙,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼添坊!你這毒婦竟也來了剿另?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤帅腌,失蹤者是張志新(化名)和其女友劉穎驰弄,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體速客,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡戚篙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了溺职。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片岔擂。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡浪耘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出痛倚,到底是詐尸還是另有隱情澜躺,我是刑警寧澤,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布耘戚,位于F島的核電站操漠,受9級特大地震影響浊伙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜吧黄,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一拗慨、第九天 我趴在偏房一處隱蔽的房頂上張望奉芦。 院中可真熱鬧声功,春花似錦宠叼、人聲如沸先巴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽剂邮。三九已至横侦,卻和暖如春挥萌,著一層夾襖步出監(jiān)牢的瞬間枉侧,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工憨栽, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留翼虫,地道東北人。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像次慢,于是被迫代替她去往敵國和親翔曲。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,171評論 25 707
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程掠械,因...
    小菜c閱讀 6,426評論 0 17
  • 星期天小哼和小哈約在一起玩桌游,他們正在玩一個非常古怪的撲克游戲——“小貓釣魚”。游戲的規(guī)則是這樣的:將一副撲克牌...
    青蔥烈馬閱讀 1,509評論 0 0
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)舔箭,斷路器,智...
    卡卡羅2017閱讀 134,662評論 18 139
  • “我不是天生的王者箫章,但是骨子里留著一股不服輸?shù)难骸薄D阏f出這樣的話時候镜会,沒有想到你會輸給時間吧檬寂?時間可以吞噬...
    麻天喜閱讀 625評論 4 11