I have created simple webpage using html5 and css.
I have created sticky footer with 4 columns and each column have vertical navigation menu.
Here is my code:
<footer>
<div id="footer">
<div class="footer-column" id="footer_column1">
Home
</div>
<div class="footer-column" id="footer_column2">
about us
</div>
<div class="footer-column" id="footer_column3">
contact us
</div>
<div class="footer-column" id="footer_column4">
Blogs
</div>
</div>
</footer>
and this is for css:
#footer {
position:absolute;
clear:both;
bottom:0;
color:#000;
width:100%;
height: 50px;
background:#fff;
left:0;
}
.footer-column {
float: left; /* Push the div as far up-left as it can be put */
width: 25%; /* Make sure to subtract the padding */
padding: 10px; /* We want padding on all sides to make things look nice */
text-align:center;
}
Now page looks like : s22.postimg.org/l0l6y85o1/Untitled_1_copy.png
If i increase the height of footer, it will be hidden background of slideshow.
Can anyone help me, how to fix this. Thanks in advance.
You have given absolute positioning to footer so it will stay there, now your page is basically overlapping it. You should use relative layout for your page.
I would suggest you to use bootstrap for this. Here is a simple example or this.
Regarding z-index - If you will give higher z-index to your footer say 999999 then it will be on top (higher than other elements on page).
Z-index will not actually help you with positioning. Always something will be hidden. If you want your footer to be right at bottom of the page then do not use absolute positioning and it will be pushed down.
Try:
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 100px;
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 100px;
}
Related
I have the following attempt, trying to make a simple sticky footer.
My problem is the footer is not sicking to the bottom, I suspect it might be a css problem.
Would greatly appreciate it if someone can give the following code a scan and provide some advise.
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: absolute;
bottom: 0;
}
<footer class="footer" id="footer">
<div class="footLeft" style="width:75%; float:left;">
</div>
<div class="footerRight" style="width:25%; float:right; padding:25px;">
<button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
</div>
</footer>
The Problem Im having / Output
Add the following rules to body
body {
min-height:100%;/*or 100vh */
position:relative;
}
Explanation:
The min-height property will make sure that the body at least takes 100% of your viewport height. This way even if you have less content your footer will always stick to the bottom of viewport.
Position: relative rule is set so that the footer is positioned absolute relative to the body and not any other wrapper
You can just use this native class to achieve sticky footer in bootstrap--
<div class="footer navbar-fixed-bottom">
Another possibility is using position:fixed, without influencing the body css.
In that case the footer would be always at the bottom of the page event if a scrollbar is present
Example
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: fixed;
bottom: 0;
}
See fiddle
I'm looking for a way to add a footer to my page which will always show up at the bottom. The problem is, a lot of the content on the page is set via position: absolute;, so at the moment, unless I manually give the footer a margin-top: 900px; value, its simply hidden by one of the absolute positioned content. But on some pages where the content is less than 900px, there is an unnecessary gap at the bottom between the end of the page, and the footer.
How can I resolve this in such a way that there's no gap between the end of content and footer?
In the new jquery, you can just use this:
<div data-role="footer" data-position="fixed">
<h1>Fixed Footer!</h1>
</div>
from http://jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html
Put everything before the footer in a div with position relative. This div will flex vertically to the content in it and will provide the buffer to keep anything after it right below it. No margin needed.
You also can put indexes.
z-index: 1;
http://www.fiveminuteargument.com/fixed-position-z-index
In your case, put z-index in css for footer at 10 or more.
Let's suppose a <footer>, styled with display: block and height: 250px.
So all you have to do to achieve what you want is add:
position: fixed;
top: 100%;
margin-top: -250px;
That's it. It'll be permanently aligned at the bottom. :)
Sticky footer. No javascript required:
http://www.cssstickyfooter.com/
After doing some fiddling I was reminded that absolute positioning removes the element from the document flow. You cannot depend on an absolute positioned element to affect the other elements because it will not. Because you do not know the height of the content then using margin-top is clearly not option.
So I came up with this: basically do a normal layout with floats then use position relative to move the items where you want them. This way the elements still affect the document flow, however, now you have total control over the position. This is precisely what relative positioning is for: You want total control over the position of an element but you still want they element to affect the layout normally.
<html>
<head>
<style>
body {
text-align:center;
}
#container {
position:relative;
margin:0 auto;
width: 1000px;
text-align:left;
}
#header {
position:relative;
top:0px;
left:0px;
width:1000px;
height: 100px;
border:solid 1px #000;
}
#sidebar {
position:relative;
top:10px;
left:0px;
width:300px;
height: 500px; /* for demo */
float:left;
margin-bottom: 20px;
border:solid 1px #000;
}
#main {
position:relative;
top:10px;
left:310px;
width:690px;
height: 200px; /* for demo */
margin-bottom:20px;
border:solid 1px #000;
}
#footer {
margin:0 auto;
top:20px;
width: 1000px;
text-align:left;
height: 100px;
clear:both;
border:solid 1px #000;
}
</style>
</head>
<body>
<div id="container"> <!-- Holds all the content except the footer -->
<div id="header">Header content here</div>
<div id="sidebar">Sidebar content here</div>
<div id="main">Main content here</div>
</div>
<div id="footer">Footer content here</div>
</body>
</html>
This is the page I am working on right now: http://jsfiddle.net/0xsven/hycRx/
I want the page to expand vertically to fill the whole screen so that the footer is always at the very bottom. I am not searching for a sticky footer! I want the page to expand to the bottom like in this picture.
Any idea if this is possible?
Update
I used some confusing words so I am trying to clarify my question:
I want my page to always fill out the viewport vertically, even if there is not enough content. As soon as there is enough content to even extend the viewport the page should be scrollable. In my tests a sticky footer always stays at the bottom of the viewport covering other elements, which I don't want to happen.
One solution I came up with is manipulating/resizing the paddings/margins with jquery so it fits the viewport. But I dislike using javascript for such things.
You can experiment with the position attribute, like this:
#footer{
background-color: #222;
position: relative;
bottom: 0;
}
#footer{
position: fixed;
bottom: 0;
}
The behaviour you're trying to emulate is that of the conventional CSS Sticky Footer.
Here's a simple example:
HTML
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
CSS
html, body {height: 100%;}
#wrap {min-height: 100%; *display:table; *height:100%}
#main {overflow:auto; padding-bottom: 150px;} /* must be same height as the footer */
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).