I am having trouble with a footer expanding. I know what your thinking, just look up sticky footers. Well I don't want sticky footers, I want the footer to expand 100% if the browser res is larger than the page. Here is and example of what its is doing: [attachment=0]site.gif[/attachment] Basically I want that grey area to expand to the bottom on larger screens.
Any ideas? Very simple CSS for the footer
div.footer { background:#E1E7E7; height:100%; } /* THIS IS INSIDE THE FOOTER */ div.footer-container { position:relative; width:826px; margin:0px auto 0 auto; } div.footer-container ul { height:200px; } /* THIS IS FLOATING ELEMENT - I DON'T THINK IT IS THE PROBLEM AS DISPLAY:NONE; DOES NOT EFFECT THE PROBLEM I\"M HAVING */ div.flash-beaker { position:absolute; margin-top:-147px; margin-left:718px; }
I tried to separate the code so you could see what I'm talking about...Also here is a new screen. notice the scrollbar on the right. This is driving me nuts.[attachment=0]site-long.gif[/attachment]
Let me make sure I'm understanding your question. You have a footer that starts out at height X. If the browser window is smaller than the page (or the same size), then the footer's height stays at X. But if the browser window is larger than the page, rather than having the footer keep its height of X and move so that it sticks to the bottom, you want it to stay in the same position but get taller so that it touches the bottom of the window?
Assuming that's correct, I feel like you'd have to use some JavaScript to accomplish that, because the height of the footer would be dependent upon the height of the window. Use JS to grab the height of your page's container and the height of the browser window. Then, subtract the container's height from the window's height, and add that difference onto the footer.
Alternatively, if your footer is just a solid color...just make your page's background the same color! Then when the footer ends, it'll blend right in with the page background, making it look like the effect you want.
Thanks for the reply. I was afraid I was going to have to revert to JS. The solution I am currently using works, but for some reason makes the scrollbar acts a bit strange. It fills in the blank space, but ends up adding extra space at the bottom for some reason. Check out the second screen for details.
I wish I could use your second option, but I have two backgrounds across the page. Maybe I could rework the top HTML to give me the effect your talking about. You gave me a new idea so I'll see what I can do...
I am having trouble with a footer expanding. I know what your thinking, just look up sticky footers. Well I don't want sticky footers, I want the footer to expand 100% if the browser res is larger than the page. Here is and example of what its is doing: [attachment=0]site.gif[/attachment] Basically I want that grey area to expand to the bottom on larger screens.
Any ideas? Very simple CSS for the footer
body, html {
height: 100%;
}
and it worked, but now I have extra space on the scrollbar. Hummm
CSS
html, body {
height: 100%;
}
div.site-container {
width:826px;
margin:0 auto 0 auto;
overflow:hidden;
}
div.header {
overflow:hidden;
}
div.sidebar {
width:225px;
float:left;
overflow: hidden;
}
div.news-updates-scroller {
height:311px;
overflow:auto;
}
div.right-content-well {
float:right;
overflow:hidden;
}
div.footer {
background: #999999;
min-height:100%;
}
div.footer-container {
width:826px;
margin:0 auto 0 auto;
}
HTML
Assuming that's correct, I feel like you'd have to use some JavaScript to accomplish that, because the height of the footer would be dependent upon the height of the window. Use JS to grab the height of your page's container and the height of the browser window. Then, subtract the container's height from the window's height, and add that difference onto the footer.
Alternatively, if your footer is just a solid color...just make your page's background the same color! Then when the footer ends, it'll blend right in with the page background, making it look like the effect you want.
Thanks for the reply. I was afraid I was going to have to revert to JS. The solution I am currently using works, but for some reason makes the scrollbar acts a bit strange. It fills in the blank space, but ends up adding extra space at the bottom for some reason. Check out the second screen for details.
I wish I could use your second option, but I have two backgrounds across the page. Maybe I could rework the top HTML to give me the effect your talking about. You gave me a new idea so I'll see what I can do...