Menu
I have been working on this for the past couple of hours, and searching the web and stackoverflow hasn't been much support. How do I make #gradient and #holes fill the entire page?
I have used the Inspect Element feature in Safari, and when I highlight the body element it does not fill the entire window.
HTML:
<body> <div id="gradient"></div> <div id="holes"></div> <div id="header">Header Text</div> </body> CSS:
html, body { height:100%; margin:0; padding:0; } body { background-image:url(../Images/Tile.png); background-color:#7D7D7D; background-repeat:repeat; } #gradient { background-image:url(../Images/Background.png); background-repeat:repeat-x; position:absolute; top:0px; left:0px; height:100%; right:0px; } #holes { background-image:url(../Images/Holes.png); background-repeat:repeat; position:absolute; top:2px; left:2px; height:100%; right:0px; } #header { background-image:url(../Images/Header.png); background-repeat:repeat-x; position:absolute; top:0px; left:0px; width:100%; padding-top:24px; height:49px; /* 73 - padding */ color:rgb(113, 120, 128); font-family:Helvetica, Arial; font-weight:bold; font-size:24px; text-align:center; text-shadow:#FFF 0px 1px 0px; } 
404
For this html and body should have 100% height. This height is equal to the viewport height. Make inner div position absolute and give top and bottom 0. This fills the div to available height.
That is because you have align-items: center for the flexbox in which case it will default to the content height. What you need to do is to remove that (let align-items: stretch come into play as it is the default) and also remove the height:100% from CASideBorder .
Note that the height property specified in percentage is calculated with the respect to the containing block ..which doesn't necessary have to be the immediate ancestor – "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block". I bet this is what's going on in the questioner's case as there is no positioned ancestor (the one with position: set either to relative or absolute).
So the "containing block" resolves to the initial containing block which corresponds with the dimensions of the viewport (window). Setting position:relative to body will take the body's height into account and stretch the absolutely positioned content along body completely.
More on containing block here.
66
I was having the same issue. Fixed it by changing position: absolute to position: fixed.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
