css - div 自適應(yīng)高度 自動(dòng)填充剩余高度
問題描述
固定的盒子需要絕對(duì)定位才能實(shí)現(xiàn)以下效果，希望有不需要絕對(duì)定位實(shí)現(xiàn)以下方法的大神！求指點(diǎn)
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Document</title> <style> html, body {height: 100%;padding: 0;margin: 0;overflow: hidden; }.outer {height: 100%;padding: 100px 0 0;box-sizing: border-box; }.A {height: 100px;background: #BBE8F2;position: absolute;top: 0;left: 0;width: 100%; }.B {height: 100%;background: #D9C666;overflow: scroll; } </style></head><body> <p class='outer'><p class='A'> 頭部p </p><p class='B'> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdfD</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdfD</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdfD</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdfD</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdfD</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdfD</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>abcabsdf</p> <p>sssssssssssssssssssssss</p> </p> </p></body></html>
問題解答
回答1：問題有點(diǎn)模糊，如果是要求A+B等于outer的高度，可以用calc(100% - 100px);
回答2：浮動(dòng) 固定定位
回答3：你的問的不太明白啊，能說的具體點(diǎn)嗎？
相關(guān)文章：
1. list - python 求助2. linux - Ubuntu下編譯Vim8（+python）無數(shù)次編譯失敗3. python - TypeError: tryMsgcode() takes exactly 2 arguments (0 given)4. javascript - react，獲取radio的值出錯(cuò)5. css - 移動(dòng)端 line-height安卓錯(cuò)位,蘋果機(jī)正常用,縮放解決了,可是又出來了占位的問題6. extra沒有加載出來7. javascript - 彈出一個(gè)子窗口，操作之后關(guān)閉，主窗口會(huì)得到相應(yīng)的響應(yīng)，例如網(wǎng)站的某些登錄界面，django后臺(tái)的管理等，這是怎么實(shí)現(xiàn)的呢？8. 環(huán)境搭建 - anaconda 創(chuàng)建python2.7環(huán)境中打開編譯器確是3.6版本9. mysql replace 死鎖10. 求救一下，用新版的phpstudy，數(shù)據(jù)庫過段時(shí)間會(huì)消失是什么情況？
網(wǎng)公網(wǎng)安備