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?
Related
I read the suggestions here: White space below footer on my bootstrap pages
When I try this (position: absolute), it fixes the issue, but the lower parts of my website are no longer readable from small screens, because the footer is always overlapping parts of the website's body.
Is there a method to fix the footer as suggested, but still keep the complete body content readable from any screen size?
Depending on your page set up this simple fix may suffice...
footer {
margin-bottom: -20px;
}
N.B. I'm working with Bootstrap 4.
The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.
I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.
It is possible to limit the size of the popup thusly:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.
How do I allow the popup content to scroll vertically within the popup?
You should use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
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 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
I'm creating a mock-up of a function to be added to a mobile version of a site. The idea is to have a horizontally scrolling footer of links with vertically scrolling content; in effect, recreating the functionality of the native iOS behavior when double-tapping the home button.
Problem: when the page loads, it appears the viewport is not getting recalculated to match the new content area height. This leaves an ugly blank area (apparently the size of the URL bar in iOS Safari) below the scrollable footer.
I've tried adding a timeout to recalculate the height (using the function in scrollview.js). When using a fixed-position footer, the footer behaves strangely but eventually reappears in the expected place - the blank space remains, however.
Link to jsfiddle code.
Link to imgur screenshot from my iPhone.