使背景顏色延伸到溢出區域如果父級的總內容高度為10,000px但overflow: auto元素的渲染高度為700px，我如何強制aside子元素動態渲染為10,000px 而不是默認的700px？您可以在開始滾動小提琴時看到白色背景?？梢圆惶砑尤魏胃嗟脑兀?:after和::before是可以接受的，雖然）。該aside元素必須有它的內容與滾動main通過元素的內容#body元素（無position: fixed;）。所述aside元件必須有它的background-color從0像素最頂部到最底部拉伸（例如5,000px或10,000px）遠低于初始可見的折疊。該aside元素不能有它自己的overflow: auto;。動態（對于較小的知識）暗示我們不能設置靜態height，例如height: 10000px因為我們不知道渲染高度是什么。在我的例子中，當你開始滾動綠色background-color結束時，我想讓aside元素一直延伸到內容底部。<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Overflow Flex Box Issue</title><style type="text/css">* {border: 0; margin: 0; padding: 0;}aside{
background-color: #afa;
order: 2;
width: 20%;}body{
display: flex;
flex-direction: column;
height: 100%;}body > header{
align-self: stretch;
background-color: #faa;
flex: 0 1 auto;
min-height: 56px;
order: 1;}body > footer{
align-self: auto;
background-color: #aaf;
flex: 0 1 auto;
min-height: 36px;
order: 2;}html {height: 100%;}main{
background-color: #cfc;
order: 1;
width: 80%;}#body{
display: flex;
order: 2;
overflow: auto;}</style></head><body><div id="body"><main><article><p>article</p><p>article</p><p>article</p><div style="height: 10000px;">10,000px</div></article></main><aside><p><aside>, 100% height only of visible area, it <em>should</em> be <em>100% of total parent height</em>.</p></aside></div><header>The body > header element; element 2, order: 1;.</header><footer>The body > footer element; element 3, order: 3;.</footer></body></html>
3 回答
慕俠2389804
第一部分：
第二部分：
TA貢獻1719條經驗 獲得超6個贊
除了絕對定位，這對CSS來說是不可能的。你需要使用JavaScript。
這是問題所在：
第一部分： background-color
您沒有為內容元素（#body）定義高度。
這意味著高度是內容驅動的。
背景顏色僅覆蓋元素的寬度和高度。您可以在演示中看到這一點。滾動開始后，背景顏色結束。那是因為溢出區域在元素的寬度/高度區域之外。
從規格：
作者可以將元素的背景（即，其渲染表面）指定為顏色或圖像。在方面盒模型，“背景”指的背景
content，padding和border地區。
因此，CSS背景屬性旨在覆蓋直到元素邊界的區域。它們不包括邊緣區域。他們不會溢出。
第二部分： overflow
這是截斷背景顏色的另一個原因。
該overflow屬性僅適用于內容。它與背景無關。
從規格：
此屬性指定塊容器元素的內容在溢出元素框時是否被剪切。
由于這兩個障礙阻礙了CSS，因此CSS無法解決這個問題（除了可能的黑客攻擊）。使背景顏色填充動態大小容器的整個長度的唯一方法是使用腳本。
- 3 回答
- 0 關注
- 1299 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消