How to make a Linear-Gradient in CSS go for the whole page instead of short Bursts?
I am writing a long blog and my linear-gradient background gets cut off in small bursts. How do I make the gradient proportional for the whole blog. Can you guys help me with some CSS code.
What element are you applying it to, and do you have any floats or APo (absolute positioning) involved?
Remember, by default BODY does not extend to full height of the content if the content is shorter than the window, so you need to set:
html, body { height:100%; }
So that it will be as tall as the screen as a minimum. Amazingly height on HTML and BODY is treated as min-height. This also fixes the issue that if you need a min-height on a inner container, you can't do it wtihout the parent elements having a height declared. Remember, % height on elements where the parent element has no height is ignored -- hence the old "Holly hack" trick for IE of height:1%; where all normal browsers ignored it, but it triggered "haslayout" in exploder.
Then there's the issue that floats and APo (and fixed positioning) are removed from 'flow'; meaning their heights aren't reported to their parents. This is just another reason that removing major layout elements from flow with such positioning is an epic /FAIL/ at layout building.
Beyond that, I'd need to see the page in question. Without the code / layout it's nigh impossible to tell you much more.
Jason Knight
The less code you use, the less there is to break
What element are you applying it to, and do you have any floats or APo (absolute positioning) involved?
Remember, by default BODY does not extend to full height of the content if the content is shorter than the window, so you need to set:
html, body { height:100%; }
So that it will be as tall as the screen as a minimum. Amazingly height on HTML and BODY is treated as min-height. This also fixes the issue that if you need a min-height on a inner container, you can't do it wtihout the parent elements having a height declared. Remember, % height on elements where the parent element has no height is ignored -- hence the old "Holly hack" trick for IE of height:1%; where all normal browsers ignored it, but it triggered "haslayout" in exploder.
Then there's the issue that floats and APo (and fixed positioning) are removed from 'flow'; meaning their heights aren't reported to their parents. This is just another reason that removing major layout elements from flow with such positioning is an epic /FAIL/ at layout building.
Beyond that, I'd need to see the page in question. Without the code / layout it's nigh impossible to tell you much more.