css - div 自適應高度 自動填充剩余高度
問題描述
固定的盒子需要絕對定位才能實現以下效果，希望有不需要絕對定位實現以下方法的大神！求指點
<!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：問題有點模糊，如果是要求A+B等于outer的高度，可以用calc(100% - 100px);
回答2：浮動 固定定位
回答3：你的問的不太明白啊，能說的具體點嗎？
相關文章：
1. Python爬蟲如何爬取span和span中間的內容并分別存入字典里？2. mysql - 把一個表中的數據count更新到另一個表里?3. 請教使用PDO連接MSSQL數據庫插入是亂碼問題?4. python - 爬蟲模擬登錄后，爬取csdn后臺文章列表遇到的問題5. visual-studio - Python OpenCV: 奇怪的自動補全問題6. linux - Ubuntu下編譯Vim8（+python）無數次編譯失敗7. node.js - nodejs開發中常用的連接mysql的庫8. mysql 查詢身份證號字段值有效的數據9. 視頻文件不能播放，怎么辦？10. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處
網公網安備