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
Related
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;
}
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
I have a HTML5 audio player in a div. I have set its width to 100%. I wanted to fix the player at the top when scrolled so I fixed it's position. The problem is when I do that, the player width overflows the container.
Below is my code.
HTML
<div id="container">
<audio arc="#" controls></audio>
</div>
CSS
#container {
width : 350px;
height: 300px;
background: #BADA55;
}
audio {
width: 100%;
/*position: fixed;*/
}
I created a fiddle to demonstrate the issue. Its currently in the state which I want it to look like. Un-comment the position: fixed; to see the problem.
Can anyone please tell me what I should do to make it stay fixed with the correct width?
Thanks
You can try with
width:inherit;
http://jsfiddle.net/vfQ5K/2/
Need to wrap the audio element and apply the css to the wrapper. I updated your jsfiddle.
<div id="container">
<div class="audioWrap">
<audio arc="#" controls></audio>
</div>
</div>
Then CSS:
#container {
width : 350px;
height: 300px;
background: #BADA55;
position: relative;
}
.audioWrap {
width: 100%;
position: fixed;
}
Note, if you are fixing it's position inside the container, you may want to add 'position: relative' to the container. I went ahead and added that to the jsfiddle.
I want to use three <div> areas on my web page: Header, Content and Footer.
The Footer <div> is supposed to stick to the bottom of the web page.
The Header <div> is supposed to stick to the top of the page.
The Content <div> is supposed to fill the whole area in the middle of the page.
So this is the basic layout:
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
For the Footer to stay down the page I added
#footer
{
position: fixed;
bottom: 0;
}
For the Content <div> I'm using a background image, scaling exactly to the div element's dimensions:
#content
{
background: url("Bilder/Bild.png") center contain no-repeat black;
}
Now I want the Content <div> to be exactly the remaining height of the ViewPort between Header and Footer without adding any JavaScript, no matter what content is later added to the Content <div>.
How can I do that in CSS3?
If the size of footer and header is known, you can use calc(). So assuming both take 100px together, this should work:
html, body { height: 100%; }
#content {
height: calc( 100% - 100px );
}
Be aware, though, that old browsers do not support this. Also have a look at the compatibility table for the prefixes that might be needed.
Example Fiddle
you could use something like this. it will allow you to keep your positions in a range of resolutions.
#header {
position: fixed;
height: 10%;
}
#content {
position: fixed;
height: 80%;
top: 10%;
}
#footer {
position: fixed;
bottom: 0px;
height: 10%;
}
check it out here
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;/
}