css - div 自適應高度 自動填充剩余高度
問題描述
固定的盒子需要絕對定位才能實現(xiàn)以下效果，希望有不需要絕對定位實現(xià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：問題有點模糊，如果是要求A+B等于outer的高度，可以用calc(100% - 100px);
回答2：浮動 固定定位
回答3：你的問的不太明白啊，能說的具體點嗎？
相關文章：
1. javascript - js 寫一個正則 提取文本中的數(shù)據(jù)2. javascript - 為什么我的vue里的router-link不起作用3. javascript - js一個小的算法問題，找個好一點的答案。4. javascript - vue子路由匹配渲染到頂級視圖層問題5. 算法 - python 給定一個正整數(shù)a和一個包含任意個正整數(shù)的 列表 b，求所有<=a 的加法組合6. javascript - 游戲里物體角色層次渲染邏輯和代碼怎么寫才好？7. javascript - 發(fā)現(xiàn)個奇怪的問題，寫的css動畫當我把標簽頁收起時動畫自動暫停了8. javascript - 新組成的數(shù)組打印出來出現(xiàn)問題，里面有對象，但長度為空9. javascript - 關于Lazyload遇到的問題10. javascript - 如果根據(jù)參數(shù)給table中的tr綁定不同事件
網(wǎng)公網(wǎng)安備