Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.My header is 100% of the page width, when I expect it to be 100% of its parent width.The background appears at 100% of the window height, but it then scrolls up with the content.I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.Many thanks in advance,JamesHere's a demo of the issueAnd here's the barebones HTML:\[code\]<!DOCTYPE html><head><title>Width & Height 100%</title><style>html { height:100%;}body { background: #666; height: 100%; margin: 0;}#container { position: relative; height:100%; background: white; width: 400px; margin: 0 auto; padding: 0 0;}#header { position:fixed; z-index:100; background:#ffe; /* width:760px; */ width:100%; height:64px;}#content { position: absolute; left:20px; width:360px; height:360px; margin:64px 0 0 0; background:#efe;}</style></head><body><div id="container"> <div id="header"> Fixed header </div> <div id="content"> Scrollable content </div></div></body></html>\[/code\]
