css - div 自適應(yīng)高度 自動填充剩余高度
問題描述
固定的盒子需要絕對定位才能實現(xiàn)以下效果，希望有不需要絕對定位實現(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：浮動 固定定位
回答3：你的問的不太明白啊，能說的具體點(diǎn)嗎？
相關(guān)文章：
1. 關(guān)于docker下的nginx壓力測試2. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題3. mac里的docker如何命令行開啟呢？4. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””5. docker容器呢SSH為什么連不通呢？6. nignx - docker內(nèi)nginx 80端口被占用7. docker - 各位電腦上有多少個容器啊？容器一多，自己都搞混了，咋辦呢？8. docker-compose 為何找不到配置文件？9. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個是怎么回事？？？？10. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。
網(wǎng)公網(wǎng)安備