i'm using the method listed here to create a sticky footer. This works great, however my content divs above it have a semi transparent background, and are in turn placed on another background. You can see the site I am working on here
what I want to do is to have a sticky footer, but I also need the transparent background in the content div to expand to reach the footer.
Thanks.
Related
I have a footer element and I'd like to fade all content above it, as follows:
scrollable mixed content (should be normal/solid on top)
scrollable mixed content (should transition to transparent here)
fixed-position, solid, footer
The "mixed content" could be anything, there's no set background color. I'm trying to blend or mask the content so it fades to transparent as it approaches the footer boundary.
I don't think it's possible with a footer background image or webkit-mask because that relies on a fixed background color for the mixed content. The only idea I had was putting all the mixed content in a fixed container element and using a mask on the bottom of it, but that's complicated and slows everything down.
on large screens my footer doesn't sit at the bottom of the page leaving a white "bar" along the bottom (color of the page background).
I'm aware of sticky footers etc but due to using absolute positioning on elements in the footer these techniques make the rest of the footer go awry. I have now added an empty div below the footer directly before and set its min height to 100% and background colour to match that of the footer (black) however it does not do anything - only a set height in pixels will do anything but i want it to be dynamic so it fills the space if it is there whether its 10px of space or 500px of space.
Has anyone got an for a work around?
If you don't want to do a sticky footer, make your body background color the same color as your footer, then set the background of your content area to white. This gives the appearance that the footer extends to the bottom of the page, no matter the size of the browser.
Yes, you don't use the 'absolute' style of footer positioning, it's a terrible solution.
Oddly enough, Twitter Bootstrap has the easiest example of how to implement a sticky footer - it's a technique that's been around for ages:
http://getbootstrap.com/examples/sticky-footer/
The method is simple. Put a wrapper div around all your code, except for the footer.
If you refer to the source of that link, you'll see a wrapper with an id of wrap.
If you then examine the css for the above:
http://getbootstrap.com/examples/sticky-footer/sticky-footer.css
Just copy the sticky footer styles section and adapt for your site. The key part of this is the footer height value matches the margin and padding values of the wrapper element.
I am working on a large website for a client and we have run into an issue with the previous designers structure. The footer does not stay at the bottom of the content when it is dynamically generated. I have hidden divs that are opened with links. These divs contain user comments. When both are opened the footer overlaps some of the content. When I zoom in the footer overlaps some of the main content. I've tried:
Ryan Fait's CSS and HTML5 Sticky Footers
How to keep footer at the bottom even with dynamic height website
CSS Reset Sticky Footer
Prevent footer from overlapping
All with no success. Is doing a full restructure the only option? I've also tried using JavaScript to make the footer stay at the bottom of the content. But once the document is loaded and the height changes, the footer doesn't move with content. Ideas? The code I have is very long - 4000 lines of css, 2000 lines of HTML. Should I post part?
I have no idea how to go about this:
I have a full-screen background image, a navigation bar with 50% transparency fixed to the top, and content below it. How can I have the navigation bar maintain transparency over the background image, and still have scrolling content?
The issue right now is that when I scroll down, the content goes under the navigation bar, and shows through the transparency, which obviously looks awful.
Basically, I want the content of the page to scroll and disappear at the bottom of the navigation bar. I know I could make the navigation bar opaque and use a background image for that too, but I'd rather just have the one full-screen background image.
Thoughts?
Put the contents in a block (div) that has fixed size, say stretch it to the whole page except the size of the navigation bar. Then make that div scrollable with css property overflow:scroll
I know this is very old but I spent a lot of time looking for the answer and found a good solution so I will post it for anyone else looking for it.
Place the navbar in the element containing the background image and set the navbar's background to inherit. This prevents content from appearing behind the navbar as you scroll down.
I am developing a website where the menu it should be the end of the page. Besides the menu, another div with two images should also sit at the bottom of the page.
Follow the link to the complete source code of the page;
In red, the menu should be aligned at the bottom of the page, aligned to the center of div#leftcontent.
In the div#blue social-networks must be aligned at the bottom of the page, aligned to the center of the div#nav.
When I say bottom, I mean right at the end of the page.
If you mean not statically positioned, but just naturally occurring at the bottom of the page even when the sidebar content causes the page to exceed beyond the main content under which the bottom nav occurs, then you are out of luck using divs. This is one of CSS 2.1's major shortcomings.
You are left with two options:
Use a table for the basic layout
Use javascript to dynamically position the div based on the length of the sidebar
It's up to which you want to choose, but the javascript option will not work for people with javascript disabled, such as older mobile browsers.