I have set up a sticky footer in an HTML page. I want it to stick to the bottom of the page and anchor at the bottom of the content section. Code:
`<div id="content" class="row">`
`<div class="columns large-12" style="width: 100%; height:400px;">`
`<!--Main content here-->`
`</div>`
`</div>`
`<div class="row ">`
`<div class="footer large-12 sticky" data-sticky data-stick-to="bottom" data-top-anchor="content:bottom">`
`<div class="text-center">`
`<!--footer content here-->`
`</div>`
`</div>`
`</div>`
In order to test, I styled the content and footer divs with borders. The footer sticks to the bottom, but if I resize the browser by moving the bottom of it up without stopping, the footer does not anchor to the bottom of the content div.
However, if I move the bottom of the browser window up and stop when the top border of the footer is on the bottom border of the content div I can actually see it attach to the bottom of the content div, and it stays attached when I again move the bottom of the browser up.
The same thing happens on the way down after the footer has attached to the contend div: if I pull the bottom of browser window down and stop when I see the bottom of the content div, when I start pulling it down again, it detaches from the content div and sticks to the bottom.
Is there any way to fix this so that it works correctly if a user resizes the browser this manner?
Related
I need a table for list of records where table header is fixed and scrollable body inside a div.
Div which is non scrollable but expands its height to certain length according to certain number of records and if table has more than that records the DIV need to be fixed position.
My main concern is to avoid user to scroll the page. Instead, I want him to scroll table which is inside the Div, but if the list has less number of records div outline border looking awkward.
I am working out this table in MVC View, but couldn't get the expected result. Any sample code is appreciated?
.FixedHeightDiv
{
float:right;
height: 250px;
width:250px;
padding:3px;
background:#f00;
}
.Content
{
height:224px;
overflow:auto;
background:#fff;
}
<div class="FixedHeightDiv">
<h2>Title</h2>
<div class="Content">
your content
your content
your content
your content
your content
your content
your content
your content
your content
your content
your content
</div>
https://jsfiddle.net/PyramidTek/hrn6fwb9/
I have data-fullscreen="true" on my fixed header for a jQuery Mobile app. It's "see-thru" on top of my content, so I am hoping I can turn it solid on the page load, then see-thru when the user starts scrolling (or solid only when scrolled to the top).
I am using the age old trick to make a div scrollable like below:
<div style="height: 100px; overflow: scroll;">
Messages within div.
Messages within div.
Messages within div.
Messages within div.
</div>
But the scroll bar is never shown on the iPad.
Does anybody have an idea how to add a scroll bar or at least some sort of visual indication that the div is scrollable for the iPad?
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 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