I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives
Related
I have a site using jQuery Mobile pages. On desktop and tablet devices (#media only screen and (min-width: 800px)) I want to display the page like this:
My problems:
On some pages, the contents of the 'content' area will be higher than the available height between header and footer, and I would like the scrollbar ONLY for the content (header and footer are fixed).
On other pages, the contents of the 'content' area will have less height than the space between the header and footer. HOWEVER, I need the content area to be 100% of the available space between header and footer in order to lay out it's contents proportionally.
I've tried various jQuery and CSS (calc(...)) solutions, but it's getting quite hacky. Can you give me a simple solution?
I have two divs, neither floated, and the bottom one has a negative margin on top (pulling it upwards). That bottom div is ‘covering’ some of the links in the div underneath. I need links to work in both divs, and z-index doesn’t seem to be working at all.
Again, neither div is floated, just the bottom div pulled up a bit with a negative margin on top and it’s ‘covering’ links in the div below it.
Any thoughts? Thanks!
The site in question is here: http://dawsondental.ca (see the footer)
So, I don't believe it's actually possible to allow links in both layered divs to work. I have the divs relatively positioned so that z-index works, but regardless, layered is layered. It's not possible to have useable content in layered divs. Right? If anyone knows anything I'm missing, I'm all ears.
Thanks
i'm using jquery 1.1.0 and i have a custom header here
i've set the css of this header to be a height of 200px; (i hardcoded it for testing, if i place items in there to make it dynamically get to 200 px, it's the same thing)
the problem is when i transition to another page
$.mobile.changePage("#SurveyCreateView", "none", false, false);
the content on the second page basically ignores the height of the custom header i have. (so the content starts all the way at the top) if i resize the window or if i do a back, and navigate to the second view again, then everything is okay.
anybody have any idea how to fix this?
I have a simple page with fixed header and footer. When it Slides from page1 to page2, the footer on page is first shown at the position where the content of page2 is ended (somewhat middle) then after page finish sliding the footer re-position itself and move to bottom. Is there any way to avoid this?
In the pageshow event handler of the second page you can try adding the following code snippet:
$.mobile.fixedToolbars.show(true);
I believe this is a bug in JQM. It happens when the page content is shorter than the screen size.
My educated guess, why it happens:
After transitions, JQM triggers updateLayout, which recalculates footer position by hiding-recalulate-showing
Toolbars are hidden using CSS:top property and setting it to 0
So on a long page, to hide the footer CSS:top is set to 0, pushing your footer down to where it would be in a static page flow = the end of your document.
To show the footer, JQM calculates, where you are on your page vs. your screen size and footer height and comes up with some CSS:top = -12345px. Check CSS-top in Firebug when the footer is visible.
= to hide: CSS-top = 0
= to show: CSS-top = -1234px
Now if your page is shorter than the screen height (screen 600px, page 200px for example), hiding the footer by setting CSS:top=0 will stick it to the end of the page, which is right in the middle of your screen at 200px.
Since updateLayout recalculates footer position, it is hidden-recalculated-shown. And there you have your jumping footer.
I've done a fix with pull request on Github - https://github.com/jquery/jquery-mobile/pull/3050.
I guess since the toolbars will switch to pos:fixed with JQM 1.1. nobody bothered to pull it in any more. But it work nevertheless.
The default behavior in jquerymobile when I have header, content and footer (where header/footer are fixed) is that when I scroll the content the header/footer show/hide. I mean when you start scrolling the header/footer hides and when u stop scrolling the header/footer are shown again. On devices its looks very bad/none-user friendly. I want to avoid this show/hide effects of header/footer. Is there any thing thats available in jquerymobile or some of its plugin to avoid it? If nothing then I want to apply iScroll on the content. Can someone guide me how to make data-role="content" using full-screen height?
If this is what you are referring to, then you can just remove the data-position: fixed from the headers and footers. I tried it on the iPhone, and it is still buggy (seems to flicker whenever a touch event it generated, even if it is not necessary).