I've followed Ryan Fait's sticky footer example and for some reason my footer, while sticky, is clipping through the rest of the divs when you reduce the height of the browser. Anyone know why this is, I'm obviously missing something, I haven't ran into this problem before.
Link: http://lithbeauty.com/test/
You need to clear your floats. Just add clear:both to your .push class. Also, you should remove the top margin and padding on your wrapper because it's forcing the height beyond 100% and creating an unnecessary scroll.
#wrapper{
position:relative;
height:auto;
min-height:100%;
}
#footer{
position:absolute;
bottom:0;
left:0;
width:100%;
}
I've found that the CSS sticky-footer approach is deceptively simple, a nightmare really. #Yusef's solution above is much more straightforward. I made a variation on this that also implements this Javascript code:
function setFooter()
{
var footer = document.getElementById("footer");
var innerWidth = window.innerWidth;
var offsetWidth = document.body.offsetWidth;
var scroll = innerWidth - offsetWidth;
if(scroll != 0)
{
footer.style.position = "relative";
}
else
{
footer.style.bottom = 25 + "px";
}
}
As long as Yusef's CSS for the footer also contains clear: both;, when there is no scrollbar in the window the footer div will automatically align below the main-content div (and also set onload = "setFooter();" in the html body tag).If there is a scrollbar in the window, the difference calculated by the scroll variable will be the integer amount that overflows (see my question for more info: Why are scrollTop, pageYOffset, and height all not working?).Watch these videos for implementing wrapper, main-content, and footer divs: http://www.youtube.com/watch?v=JnhoQ-aLfvE&src_vid=UpZbLIfHSMw&annotation_id=annotation_777473&feature=iv
Related
In this fiddle I want to create a footer that stays at the bottom of the page, as in this screenshot:
However, when the browser window is minimized so that the viewport is less than the content area, and the page is scrollable, the footer stays in the middle of the page rather than below the content. Once a user scrolls, the footer stays in the middle of the content boxes, like in this screenshot:
How do I create a footer that stays at the bottom of the viewport when there is no scrollbar, but then stays at the bottom of the content boxes when a scrollbar appears and content is outside the viewport?
I am using position:absolute; bottom:0; on the footer. Do I need to add declarations to my content box, or to the footer? Thanks for your help!
There are a lot of attempts to do this via CSS, most are hacky workarounds, and honestly its WAY easier to do with Javascript. But for pure CSS, it usually goes something like this:
1) Setting * to border-box:
* {
-webkit-box-sizing:border-box;
-moz-bos-sizing:border-box;
box-sizing:border-box;
}
2) Set footer to position:absolute, with fixed height:
#footer {
position:absolute;
left:0;
right:0;
bottom:0;
height:40px;
}
3) Set html,body, and your container to height:100%, min-height:100%, and your container position to something other than static, and padding-bottom to whatever your footer height is + a little gap (if you want):
html,body,#container {
height:100%;
min-height:100%;
}
#container {
position:relative;
padding-bottom:50px;
}
This should handle it decently well for IE8 and above. For IE7 and below ... well that gets pretty damn tricky, you can google that one if you'd like. :) Some notes:
The box-sizing declaration is needed to ensure height of 100% includes padding (otherwise it would just be 100% plus the padding you gave it).
when position:absolute is used on a child element, position other than static must be declared on the parent for the childs position to be relative to the parent, otherwise it will be the first parent up the DOM tree with position other than static (in this case, it will just be the window).
I'm trying to center an image vertically inside the div. I've read few other similar questions here on stackoverflow and decided to use this solution:
<div id="wrapper">
<div id="cell">
<img />
</div>
</div>
#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}
This works great for images smaller than the viewport size. Problem occurs when image is larger in height than the view-port. In that case wrapper div simply becomes the height of the image. And it overflows the page. How do I avoid that.
This wrapper div is part of view-port div. Viewport div is of fixed height and 100% width positioned absolute
#view-port{ height: 600px; width:100% }
EDIT: I think I caused some confusion regarding the question. I've created JSfiddle to explain what I mean
Here is a link: http://jsfiddle.net/sublime/fgTtj/
I want to vertically center the image inside #outer I dont have image dimensions, as you can see on fiddle, it works perfectly, but when #outer divs height goes less than image height, say 200 it cuts the image. I want to instead shrink that image to fit the outer div
This answer has been truncated and edited to meet the needs of the OP.
Using jQuery, here is what I would suggest.
You can get rid of several of your divs and just use a wrapper and your image. The problem with your code above is that you gave your outer div a set height at 300px. This means that it won't ever shrink smaller than that. I've written a small script to account for the window size as well
http://jsfiddle.net/fgTtj/40/
I've set up your HTML like so:
<div class="wrapper">
<img src='http://s13.postimg.org/b7hmfvhyv/css.jpg'></img>
</div>
CSS like so:
.wrapper {
position:relative;
width:100%;
height:300px;
background-color:blue;
overflow:hidden;
}
.wrapper img{
position:absolute;
max-width:100%;
max-height:100%;
}
and the new jQuery looks like this:
function center(){
var imgW = $('img').width();
var imgH = $('img').height();
var half_imgW = imgW / 2;
var half_imgH = imgH / 2;
$('img').css({
left: "50%",
top: "50%",
margin: "-" + half_imgH + "px 0 0 -" + half_imgW + "px"
});
}
$(document).ready(function(){
var wrapper_Height = $('.wrapper').height();
center();
$(window).resize(function(){
console.log(wrapper_Height);
var winH = $(this).height();
var wrapH = $('.wrapper').height();
if(winH <= wrapH){
$('.wrapper').height(winH);
} else {
if(wrapH <= wrapper_Height){
$('.wrapper').height(winH);
}
}
center();
});
});
You can resize this window in any direction and the image will stay centered and not cut off. This only works for one window at the moment, so you would have to adjust the script to accomodate more.
The awesome thing with this is that it will run in just about every browser, where display:table-cell does not work in older browsers such as IE6 and I think IE7.
What is the point of the display:table? You could leave it blank (or use display:inline-block), and add an overflow property.
#wrapper{
overflow:hidden;
}
If you want to be able to scroll to see the rest of the image:
#wrapper{
overflow:scroll;
}
If you don't want the image to extend the viewport height, set the max-height:
#cell img { max-height: 600px; }
I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?
Here's the css:
*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}
body {
margin:0;
background-color:#fff;
}
.top, .body {
max-width:640px;
width:100%;
margin:0 auto;
}
.top {
background: white url(images/top.jpg) no-repeat;
background-size:auto;
overflow:hidden;
height:124px;
max-height:124px;
}
.top ul {
list-style:none;
height:100%;
}
.top ul li {
height:100%;
float:left;
display:block;
}
I did find an answer to this. It adds a little bit of unsemantic markup, but works well.
Can find it here: http://jsfiddle.net/AdQ3P/
The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.
Edit Here's the code, so not dependent on jsfiddle.
<div class="container">
<div class="hero"></div>
</div>
.container {
width:100%;
max-width:500px;
}
.hero {
width:100%;
height:0;
background-size:100%;
background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
padding-bottom:75%;
}
Also that was one messy desk i had lol.
You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.
// Maintain aspect ratio of #my_div
// Set aspect ratio of #my_div
var aspect_ratio = 0.8;
// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");
// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
$my_div.height( $my_div.width() * aspect_ratio );
});
// Resize #my_div on browser resize
jQuery(window).resize(function() {
$my_div.height( $my_div.width() * aspect_ratio );
});
while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)
if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.
Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).
Is there any way, bearing in mind the way the jQuery Mobile framework operates, to fix the page so that the footer always aligns with the bottom of the page - no matter the height.
As it stands the height of a jQuery page will change, especially as devices are rotated portrait to landscape, so the solution would have to take this into account.
Just to clarify - I don't need the footer to be at the bottom of viewport, just working so that the default page height doesn't drop below the viewport height.
Thanks.
You can add this in your css file:
[data-role=page]{height: 100% !important; position:relative !important;}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%;}
So the page data-role now have 100% height, and footer is in absolute position.
Also Yappo have wrote an excellent plugin that you can find here:
jQuery Mobile in a iScroll plugin
http://yappo.github.com/projects/jquery.mobile.iscroll/livedemo.html
hope you found the answer!
An answer update
You can now use the data-position="fixed" attribute to keep your footer element on the bottom.
Docs and demos: http://view.jquerymobile.com/master/demos/toolbar-fixed/
Since this issue is kind of old a lot of things have changed.
You can now get this behavior by adding this to the footer div
data-position="fixed"
More info here:
http://jquerymobile.com/test/docs/toolbars/bars-fixed.html
Also beware, if you use the previously mentioned CSS together with the new JQM solution you will NOT get the appropriate behavior!
In my case, I needed to use something like this to keep the footer pinned down at the bottom if there is not much content, but not floating on top of everything constantly like data-position="fixed" seems to do...
.ui-content
{
margin-bottom:75px; /* Set this to whatever your footer size is... */
}
.ui-footer {
position: absolute !important;
bottom: 0;
width: 100%;
}
Fixed basics
To enable this behavior on a header or footer, add the
data-position="fixed" attribute to a jQuery Mobile header or footer
element.
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
jQm offers:
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/docs-footers.html
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fixed.html
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/bars-fullscreen.html
http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/toolbars/footer-persist-a.html
None of these work?
The following lines work just fine...
var headerHeight = $( '#header' ).height();
var footerHeight = $( '#footer' ).height();
var footerTop = $( '#footer' ).offset().top;
var height = ( footerTop - ( headerHeight + footerHeight ) );
$( '#content' ).height( height );
I thought I'd share my CSS only solution here. This way you can avoid the extra overhead of using JS for this.
This isn't a fixed position footer. The footer will be offscreen if the page content is taller than the screen. I think it looks better this way.
The body and .ui-page min-height and height are necessary to prevent the footer from jumping up and down during transitions.
Works with the latest JQM version as of now, 1.4.0
body,
.ui-page {
min-height:100% !important;
height:auto !important;
}
.ui-content {
margin-bottom:42px; /* HEIGHT OF YOUR FOOTER */
}
.ui-footer {
position:absolute !important;
width:100%;
bottom:0;
}
This script seemed to work for me...
$(function(){
checkWindowHeight();
$(document).bind('orientationchange',function(event){
checkWindowHeight();
})
});
function checkWindowHeight(){
$('[data-role=content]').each(function(){
var containerHeight = parseInt($(this).css('height'));
var windowHeight = parseInt(window.innerHeight);
if(containerHeight+118 < windowHeight){
var newHeight = windowHeight-118;
$(this).css('min-height', newHeight+'px');
}
});
}
Adding the data-position="fixed" and adding the below style in the css will fix the issue z-index: 1;
http://ryanfait.com/sticky-footer/
You could possibly use this and use jQuery to update the css height of the elements to make sure it stays in place.
I'm trying to make a div fill up the page, but it seems to be only as long as the content I put in it. This is my css code:
.myDiv
{
height: 30%;
}
What can I do to make it be that height whether the div is empty or has some content? (The content won't extend past the height I set here).
You are using percentages so the height of the div depends directly on its parent. Make sure the parent has a height. If the direct parent is the body then:
body{
height:100%;
}
If you know the exact height you want you for the div you should be using pixels like height:300px;
You could do something like this. (I know you didn't ask about jQuery... but it is another option)
var height = $(document).height();
$('#myDiv').css('height', height);
http://jsfiddle.net/jasongennaro/pNHzE/1/