I have no containers, no wrappers.
I simply have a layout like so...
<body>
<div id="header">
</div>
<div id="left">
</div>
<div id="right">
</div>
<div class="clear"></div>
<div id="footer">
</div>
What I am wanting to do is to make sure the footer always stays at the bottom of the screen whether I have content that goes pretty far down and or even not enough content to go all the way to the bottom of the screen.
As of right now, I can get either two of the ways listed above to work, but I want both to work.
Here is the CSS I have set-up for this.
html {
height: 100%;
}
body {
height: 100%;
position: relative;
}
#footer {
position: absolute;
bottom: 0;
}
I am aware that if I apply a min-height: 100%; to the HTML Element within the CSS Document that will go as the content goes, but if I do not have any content, per se, it will not stick at the bottom of the screen. Resolution regardless.
I have ran into this problem multiple times, and never am quite sure how to figure it out. So, some help would be much appreciated, along with some explanation.
Thank you so much everyone for your help!
use this mate, it's a really well explained and easy to follow tutorial:
http://code.google.com/p/cleanstickyfooter/
Best sticky footer ever works really really well
Quote from the site (and I agree completly):
The Difference
Google "sticky footer", I have listed below why this technique works
better than the top results from this search.
http://ryanfait.com/sticky-footer/ - This technique is similar, but
cleanStickyFooter takes it much further. The technique located here
doesn't play nicely when you want to make your footer have a width of
100%.
http://www.cssstickyfooter.com/ - This technique is one out of many I
am referring to when I say its invasive with CSS clearing hacks.
Do you want the footer to be attached to the bottom of the content whatever the amount of content, or at the bottom of the screen whatever the amount of content?
If the first, don't bother positioning it - let it go with the page flow after the content.
If the second, use position: fixed
You may need to be a little more clear. What scrolls? Header? Left? Right? Footer? Are Left and Right part of your overall content? Why is your Body positioned relative? Why do you have a "height: 100%;" for html?
You can take a look at the layout specified in this Artice by RyanFait
Cross browser, and always works :)
Related
I'm currently in a web design class to learn to code, but I have been struggling with a code and cannot figure it out for the life of me.
I have my portfolio website I'm currently working on and cannot figure out how to get the background color of my main section to go all the way to the page. If you look in the attached screenshot, my main section won't go to the bottom of the page. I have tried height: 100% and height: 100vh with no luck.
Photo of problem:
Coding is to much to post because I'm not even sure what could be causing it...however, the website link is here if you could look at the page source:
http://cherylju.com/com6338/p1_Ju_Cheryl/about.html
Any help would be amazing! I've been trying to figure this out for hours now.
Wrap you sections side by side inside a div and give it the property display:flex
<div style="display: flex;">
<section class="secondary-page"></section>
<aside class="resume"></aside>
</div>
Doing it you 'll notice inmediate changes (including what you are looking for) but the order of the sections will be changed... Then, You can get rid of float that it's not at all the best option for your goals... specially if badly used (you don't use float right to an element and float left to the other... both need same direction).
More about flex here
I am trying to write clean code without wrappers.
So let me give an example
<head>
</head>
<body>
<header>Header and nav section (Leaving nav in header is good way?)</header>
<article>Main content. This part should stretch</article>
<aside>Not so important but desktop view still have place for it</aside>
<footer>Just footer but sticky</footer>
</body>
The first try was to give footer a
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100px;
and for body
margin: 0 0 100px;
after this just set min-height: 100%; to html and it works fine.
Now I'm trying to pin aside just at the top of the footer and I can't because I need to stretch the article to cover the rest of the page.
And finally the question:
How can you achieve this if the size of the aside changes depending on the subsite, and I don't want to use wrappers because they are kind of ugly?
Additionally is it possible to use html5/css3 magic (I found advice to use flex but without example...) and still have compatibility with ie8. Usage of XP is still huge in my country sadly.
I spent a couple of days on SO and I found many examples using wrap for the whole page that includes footer or wrap for header and content that leaves footer as another box, but that's not what I want.
Update
I partially found the solution.
Link to snippet
But now I have another strange problem.
Here is example my page
I have an empty space below the footer and according to dev tool in chrome and IE this part belongs nowhere.
How is this possible?
1.footer should be position fixed
2.for body: dont use margin, use position:fixed; bottom:100px;
3.min-height:100%. Well, this is kinda nonsense. Simply use height:100%;
I want my footer to always be stick to the bottom of the screen, except in the case when there is enough page content to fill the screen In this case, the content should take priority and push the footer off the bottom (so that you have to scroll to see it).
Here is an example of desired behavior:
http://ryanfait.com/sticky-footer/
To be clear, I know about fixed toolbars in JQM, they are not what I want because they take up valuable screen space when there is a lot of content.
The closest I have come is the following CSS rule:
[data-role=footer] {
bottom: 0;
position: absolute;
width: 100%;
}
If you know a better way, please post an answer!
May be you should try Fixed Full screen or non-full screen but fixed Header and footer in JqMobile...
In jqMobile, this feature is added and is the most vibrant feature in it for webapp developers..
Take a look at it..
Fixed toolbars : JqMobile
Also you can apply custom css for the space issue by adding classes...
My best solution:
$(document).ready(function(){
$("html, body, .ui-page").height($(window).height());
}
Hope this helps.
I was using some code from this (http://webdesignerwall.com/tutorials/css-elastic-videos) site to have a nice "elastic" video container that would size with my responsive design.
I'm looking to do something similar but with images. So it resizes with the design, keeping the proportions and allow it to expand a bit outside it's current containers' margins.
I think I need to wrap the image in a div and position that somehow but I just need some advice if anyone has done something similar to this. The exact dimensions/etc are not important, just the process behind it. Thanks!
Here's an image to what I'm looking to accomplish: http://i.stack.imgur.com/84KvA.gif
How about something like this:
img {
max-width: 110%;
margin: 0 -5%;
}
Just an update, I decided to break the image out from the content, I'll add fake classes to help explain what I did...
<div class='no-longer-padded-post-element'>
<img src="now-can-span-full-width.jpg" />
<div class='content-with-padding'>
title
content
meta
etc.
</div>
</div>
First, a warning, I have come back from a years break of html/css and have pretty much forgotten everything, so I'm at newbie level again.
I have been trying to add background images - one at top left and one at bottom right. What I have at the moment can be seen here: http://test.nihongohub.com/Mainsite/firstsite.php as you can see if you change the width of the browser the div containing the img will hit my main part and ruin it.
I have tried a few fixes suggested on stack overflow but none of them worked. Does anybody have any suggestions how to fix this. A friend suggested that I add the img to the footer and squeeze it out, but I don't like this idea.
2 things I want this image to do, move with the browser window, and be able to go behind my main page.
Thanks for any help offered
You could try using fixed positioning and the use z-index to move it to the back, ie.
#bottom_leaf_holder {
position: fixed;
bottom: 50px;
right: 0;
z-index: -1;
}
edit: I ment fixed, changed the answer.
You could put all your content in a div, and add a css rule to that div. Something like
#main_holder {
background: transparent url('img.jpg') no-repeat bottom right;
}
The best solution for this would be to have a wrapper div just inside the body tag that contains only the background image. This will act similar to the body tag allowing you to place an image that does not interfere with the layout and will go underneath your content if the viewport is small.