How to keep (absolute) footer at the bottom? - javascript

I want to keep my footer at the bottom of the page while keeping there position absolute , the have the following page structure :
<div id="head"> </div> //want to keep its size auto and always on the top (position absolute)
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size
changes then footer will also change (position absolute)
How can i do this?
Edit
I think i was not clear to my question, sorry for that but my actual problem is that in #main ( height : auto ) the contents are absolute so those contents are not included in the height of main ( i am just guessing this ) thats why the height of main was 0 because of this the footer comes up. This is my actual problem.

Use bottom:0:
#foot {
position:absolute; /* your requirement, you can also use fixed though */
bottom:0;
/* your other possible styles */
}
Just keep in mind that for bottom to work, you got to specify the position as you said :)
If you use position:fixed, the footer will still be available on bottom of the page when you scroll but it is up to your requirements.

If i understand correctly you need position:fixed and not absolute..
#head {
position:fixed;
height:30px;
top:0;
left:0;
right:0;
}
#foot{
position:fixed;
height:40px;
bottom:0;
left:0;
right:0;
}
#body{
padding-top:30px; /* the same as the #head height*/
padding-bottom:40px; /* the same as the #foot height*/
}
Demo at http://jsfiddle.net/ZXMTR/

Related

resizing element with jquery breaks 100% height

I have a sidebar that has this css:
background:#164272;
position:absolute;
left:0px;
top:70px;
width:250px;
height:100%;
And with jquery im showing a table that by default was hidden and is only shown when clicking an element.
But when i show the element on smaller sized screens it pretty much breaks the 100% height. here's an image
How can i prevent it from breaking the 100%?
Thank you
Try height 100% html and body. % height relative value. So it must need standard height value. in this time html, body is the standard.
And don't forget DOCTYPE declaration.
html, body
{height: 100%;
overflow:hidden;}
#yourDiv{
background:#164272;
position:absolute;
left:0px;
top:70px;
width:250px;
height:100%;
}
http://jsfiddle.net/under_09/4bs4r0y5/
If 100% height of the side bar is what you want at all screen resolution then why not
.sidebar {
top : 0;
bottom:0;
left :0;
}
Full fledged demo here
please note that since your width is defined in PX , is't not exactly going to be resposive , on that note checkout min-width and max-width.

Keep the ads div fully in view

I've got to (unfortunately) put our ads onto our website. They're positioned down the right hand side of the page, outside of the content area.
When the screen width gets smaller, because it's positioned outside of the content they get cut off by the browser. I can offset everything by putting left: -someValuepx, which moves everything over.
Rather than having to put in lots and lots of media queries to keep slightly moving it over, is this something I can do in Javascript, to automatically keep them in the view? Ideally I'd like a function that I can run on page load, and then on the window resize event.
Here's a jsfiddle of the CSS at the moment. Edit the #container left attr to move the content.
And here's the code (as I believe it's required if you link to jsfiddle?)
HTML
<div id="container">
<div id="ads">
</div>
<div id="content">
</div>
</div>
CSS
#container {
width:500px;
min-height:100px;
background-color: firebrick;
margin:0px auto;
position:relative;
left:-50px;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:-170px;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
I have a pure css solution, if you change your div structure to the following:
<div id="container">
<div class="padding">
<div id="ads"></div>
<div id="content"></div>
</div>
</div>
You are able to use the following styles:
#container {
width:670px;
min-height:100px;
margin:0px auto;
position:relative;
}
#container > .padding {
margin-right:170px;
background-color: firebrick;
}
#ads {
background-color:red;
position:absolute;
top:0;
right:0;
width:160px;
min-height:100px;
}
#content {
width:100%;
background-color:green;
min-height:100px;
}
#media (max-width:670px) /*this is the width of the container*/
{
#container {float:right;}
}
And this will keep your adds in view when the viewport is resized
Example
What you can do, is to create a function in JS that gets executed one time when the document is loaded and also when you resize.
This function should add a class (ie: hidden) to the the ads. you want to hide, and with CSS, give the right properties. Just addClass and removeClass, depending on the situation, should make the trick.
Example:
#ads { // normal values that makes the content of the ads visible }
#ads .hide  { // offset values to hide the ads }
This way, you keep behavior & presentation separated.
Hope it helps !
In your html markup, you have both content and the ads inside a container. The problem is that the content takes all space of the container, and the ads are positioned outside of it.
Just make the container wide enaugh to hold both content and the ads, then position them appropriately. Make one break point on the width of content+ads (660px), where you would position the ads below the content, and give the container its current width (500px).

Extend image by viewpoint beyond DIV container

I have a black rectangle I wish to extend the full left to right horizontal viewpoint. Problem is, I have a DIV container (980px) I can't change (long story - basically restriction of the software I'm using).
style="position:fixed; left:0%; width:100%; height:300px"
This works, but I'm left with a fixed rectangle I don't want. Absolute positioning extends to a maximum of 980px (governing DIV container). Any suggestions? JS?
Any information you can provide would be extremely appreciated.
Within your stylesheet you will need to change the parent div ( the 980px div ) to have position: static
#parentDiv{
width:960px;
position:static;
}
#fullWidth{
position:absolute;
width:100%;
height:300px;
background: #000;
left:0;
}

Footer section add more than usual heigh

I am adding footer section to a simple web page since page has only few items on the page show white space at the bottom of the footer if i keep footer height at 150px. When i keep height:100% to take the rest of the space at bottom of the page, Rather it adds 3 - 4 times more to the footer section which show vertical scrollbar.
Is their a way i can only add that much height to footer section so that scrollbar wont be added. even using jQuery.
Example : http://jsfiddle.net/57fBK/10/
In the above mention fiddle example your will notice footer height than usual. To me it seems it by default always take height of HTML elements defined above the footer section.
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
background-color:red;
height:100%;
}
.footer
{
margin-top:50px;
text-align:center;
}
The problem here is that giving height:100% to .fullWidth makes it 100% of the viewport height...which means, if there's any content above it that pushes it down, .fullWidth is going to extend that much below the bottom of the viewport, creating a scrollbar. If you're only looking to visually have the footer appear to fill the remaining space (between the content and the bottom of the viewport), here's a way I've used once to fake it.
Simply make the entire body the same background colour as the footer, and place the rest of the content in a wrapper with the main background colour. For example, your HTML might become:
<div class="main">
(Content from before goes in here.)
</div>
<div class="row">
<div class="large-12 columns footer">footer</div>
</div>
And some altered/added CSS (it should be noted that .fullWidth is rendered completely unnecessary by this approach, so you can remove it from your HTML/CSS):
body{
background-color:red; /* Footer background colour */
}
.main{
background-color:#FFF; /* Main background colour */
}
.footer {
background-color:red;
margin-top:50px;
text-align:center;
}
Here's a JSFiddle demonstrating how this looks. Now, if there's extra space below the footer, it won't be perceivable unless you start inspecting elements. If this isn't what you wanted, you may want to look into sticky footers, as others have suggested.
Hope this helps! Let me know if you have any questions.
try this:
.fullWidth {
width: 100%;
margin:0 auto;
max-width: initial;
background-color:red;
height:100%;
}
also you need to set height for footer:
.footer
{
margin-top:50px;
text-align:center;
height: 50px;
}

Remove an element from page flow similiar to a fixed position

I was curious if there was a way to remove an element from the page flow similar to position:fixed;, such that the page won't scroll.
Example - currently even though it goes beyond the screen it doesn't increase the size of the document, but if position is changed to absolute / relative it will.
I would like for the position to be absolute (although relative will work), yet not increase the document size.
I'm looking for ways to do this be it html/css work around, JavaScript, or jquery (even browser-specific solutions).
Depending what else you have on the page, this might do the trick.
body {
height:100%;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}
If you want other elements to overflow the body, use this code.
<div class="wrapper">
<nav></nav>
</div>
body {
height:100%;
}
.wrapper {
position:absolute;
top:0;
bottom:0;
width:100%;
overflow:hidden;
}
nav{
width:98px;
height:750px;
background:blue;
position:absolute;
}

Categories