CSS Footer W/ Gradient - Not Sticky
What my designer wants and what I'm trying to code is a footer that begins at the bottom of dynamic content (actually, they want the footer to start beneath the content area up about 20px - but that's something else). The thing is, they have a gradient that they want down there that expands as the browser window does.
Due to the gradient I can't just cheat and declare the window color as black and if I set the size of the footer to the height of the gradient, I end up with the scroll bar. I feel I must be missing something incredibly obvious, but I've been staring at it so long I just am seeing cross-eyed.
<body>
<div id = "page">
<div id = "header">
</div>
<div id = "content">
I am ze content area (for now)
</div>
</div>
<div id = "footer">
I AM THA FOOTAH<br/> So much cooler than the header these days
</div>
</body>
body
{
background-color: grey;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
div
{
display: block;
}
#page
{
background-color: white;
margin: 0px auto;
padding: 0px开发者_运维问答;
}
#header
{
background: url("http://kjunek.com/images/header_background.png") repeat-x;
color: yellow;
height: 240px;
}
#content
{
background-color: white;
}
#footer
{
background: #030a19 url("http://kjunek.com/images/footer_background.png") repeat-x 50% 0%;
height: 626px;
overflow: hidden;
color: white;
}
Kind of like http://roughtech.com/t/oppsticky.html from Doing the opposite of CSS Sticky Footer only I want the red to continue down to the bottom of a window with a gradient that fades to black.
Thanks!
Deleted my last answer - it does not work either. In standards compliant modes the only content that can not be scrolled to is content inside a parent which is hidden. And except for bugs it is not shown. What I was looking at was a IE bug.
Sorry no can do in CSS as it stands today.
If you need to do a calc today you would need to use jquery to get the heights of the elements then calculate the height needed for the footer; And, use CSS gradients http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ so you can go from your shade of navy to your shade of black. I would discourage this approach as when you start to consider all of the possible resolution situations the calculation it will become rather complex and I assume they may want to redesign the heights depending on different resolutions.
加载中,请稍侯......
精彩评论