使背景顏色延伸到溢出區(qū)域如果父級(jí)的總內(nèi)容高度為10,000px但overflow: auto元素的渲染高度為700px，我如何強(qiáng)制aside子元素動(dòng)態(tài)渲染為10,000px 而不是默認(rèn)的700px？您可以在開始滾動(dòng)小提琴時(shí)看到白色背景?？梢圆惶砑尤魏胃嗟脑兀?:after和::before是可以接受的，雖然）。該aside元素必須有它的內(nèi)容與滾動(dòng)main通過元素的內(nèi)容#body元素（無position: fixed;）。所述aside元件必須有它的background-color從0像素最頂部到最底部拉伸（例如5,000px或10,000px）遠(yuǎn)低于初始可見的折疊。該aside元素不能有它自己的overflow: auto;。動(dòng)態(tài)（對(duì)于較小的知識(shí)）暗示我們不能設(shè)置靜態(tài)height，例如height: 10000px因?yàn)槲覀儾恢冷秩靖叨仁鞘裁?。在我的例子中，?dāng)你開始滾動(dòng)綠色background-color結(jié)束時(shí)，我想讓aside元素一直延伸到內(nèi)容底部。<?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>
使背景顏色延伸到溢出區(qū)域
函數(shù)式編程
2019-07-27 19:50:43
