I have this html structure with the section being basically my main content:
<html>
<head>
<body>
<nav id="primary">
<nav id="secondary">
<section id="maincontainer">
<div id="main">...</div>
<footer>
<div class="footer-inner">...</div>
</footer>
</section>
</body>
</html>
Within the div with id 'main' there is content being dynamically loaded via ajax, so the height can vary.
I need the footer to always be at the bottom, even for sub pages with barely any content not filling the page height.
Currently I have position absolute for the footer, which does not work for the dynamic content pages, the footer is stuck in the middle of the content (original window height position).
Is there a way to do this css only?
Thank you!
Do this
<footer style="position: fixed; bottom: 0; width: 100%;"> </footer>
You can also read about flex it is supported by all modern browsers
Update:
I read about flex and tried it. It worked for me. Hope it does the same for you. Here is how I implemented.Here main is not the ID it is the <main> div
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
display: block;
flex: 1 0 auto;
}
Here you can read more about flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Do keep in mind it is not supported by older versions of IE.
Using bottom:0; position:fixed for footer style You can easily achieve what you want.
body,html{ margin:0px; padding:0px;height:100%}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
position: fixed;
bottom: 0;
width: 100%;
height:50px;
}
.site-footer {
background: red;
}
<div class="page-wrap">
<nav id="primary"></nav>
<nav id="secondary"></nav>
<section id="maincontainer">
<div id="main">...</div>
<footer class="site-footer">
<div class="footer-inner">Footer</div>
</footer>
</section>
</div>
Hope it helps.
Method 1: Using calc() property by wrapping the header and content in one div.
body,html{ margin:0px; padding:0px;height:100%}
.wrapper{height:calc(100% - 50px);}
footer{ height:50px; background:red;}
<div class="wrapper">
<nav id="primary"></nav>
<nav id="secondary"></nav>
<section id="maincontainer">
<div id="main">...</div>
</section>
</div>
<footer>
<div class="footer-inner">Footer</div>
</footer>
Method 2: By using -ve height of footer with the wrapper element.
body,html{ margin:0px; padding:0px;height:100%}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -50px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
height: 50px;
}
.site-footer {
background: red;
}
<div class="page-wrap">
<nav id="primary"></nav>
<nav id="secondary"></nav>
<section id="maincontainer">
<div id="main">...</div>
</section>
</div>
<footer class="site-footer">
<div class="footer-inner">Footer</div>
</footer>
EDIT
Method 3: using same structure and calc().
body,
html {
margin: 0px;
padding: 0px;
height: 100%
}
#primary {
height: 50px;
background: green;
width: 100%;
}
#secondary {
height: 50px;
background: yellow;
width: 100%;
}
#maincontainer {
width: 100%;
height: calc(100% - 130px);
}
#main {
height: 100%;
}
footer {
background: red;
height: 30px;
}
<nav id="primary">Nav 1</nav>
<nav id="secondary">Nav 2</nav>
<section id="maincontainer">
<div id="main">...</div>
<footer>
<div class="footer-inner">...</div>
</footer>
</section>
Related
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
Right now I have a footer that is always at the bottom of the page. This is fine until I have more content than can fit on the page, which means when you scroll down, the footer scrolls up as if its fixed..
Here is my CSS:
.footerWrap{
clear: both;
position:absolute;
width:100%;
bottom:0;
}
.footer {
position: relative;
margin-bottom: 0px;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #000000;
color: #FFFFFF;
}
.footerLinks{
padding-left: 150px;
text-align: left;
}
.footerLinks p {
display: inline;
}
.footerLinks a {
color: #169e98;
}
.footerSocial{
text-align: right;
}
And my HTML:
<!--Footer-->
<div class="footerWrap">
<div class="footer">
<div class="footerLinks">
Privacy Policy<p> |</p>
Sitemap<p> |</p>
<p>© 2017</p>
</div>
<div class="footerSocial">
<img src="image/findfb.png" alt="Find us on Facebook">
</div>
</div>
</div>
Essentially, I want to put the footer Div below the text content.
it is very easy :
wrap your html code in
<div class="page">
...
</div>
and just add css
.page{
position:relative;
}
that is all
I have a site I'm currently working on which requires a sticky footer as some of the pages content is smaller then the rest.
My Website
I have tried many resources/tutorials trying to get a sticky footer working.
Tutorial Followed
I have attempted to implement this tutorial and below is my code which goes with it. I'm hoping someone
Could anybody possibly suggest CSS changes to my code to implement this feature.
<body>
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div class="push"></div>
</div>
<div id="footer-wrap">
</div>
</div>
</body>
CSS
#footer-wrap
{
background: url("images/footer.jpg") repeat-x scroll center bottom transparent;
color: rgb(117, 139, 141);
height: 462px;
position: relative;
width: 100%;
}
#header-wrap
{
clear: both;
min-height: 100%;
margin-bottom: -462px;
}
#header-wrap:after
{
content:"";
display:block;
height:462px;
}
Not working for me. Need Help!
Also 'push' is not in use. Use it maybe?
EDIT
body {
height: 100%;
margin:0px
}
html
{
height: 100%;
margin: 0px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
}
UPD
<style type="text/css">
#footer-wrap
{
height: 462px;
position: relative;
width: 100%;
}
html, body {
height: 100%;
margin:0px;
background: #eee;
margin-bottom: -462px;
}
#wrapper
{
min-height: auto !important;
min-height: 100%;
border: 1px solid red;
margin-bottom: -462px;
}
#wrapper:after
{
content:"";
display:block;
height:462px;
}
</style>
HTML
<div id="wrapper">
<div id="header-wrap">
<div id="header"></div>
<div id="home-header"></div>
<div id="page-wrap"></div>
</div>
</div>
<div id="footer-wrap">
</div>
You can do this by css trick
css
body, html{
padding:0;
margin:0;
height:100%;
}
.wrapper{
min-height:100%;
position:relative;
}
.container{
width:960px;
margin:0 auto;
padding-bottom:100px;
}
.header{
height:100px;
background-color:#066;
}
.footer{
position:absolute;
bottom:0;
height:100px;
background-color:#006;
width:100%;
}
html
<div class="wrapper">
<div class="container">
<div class="header">
Header
</div>
<div style=" text-align:center; padding-top:25px;">
Place you content here as much as you like
</div>
</div>
<div class="footer">
Footer
</div>
</div>
working js Fiddle File
This works.
CSS
* {
margin: 0;
}
html, body, #wrapper {
height: 100%;
}
.header-wrap {
min-height: 100%;
margin-bottom: -462px;
}
.header-wrap:after {
content: "";
display: block;
}
#footer-wrap, .header-wrap:after {
height: 462px;
}
#footer-wrap {
background: orange;
}
HTML
<div id="wrapper">
<div class="header-wrap">
<div id="header">#header</div>
<div id="home-header">#home-header</div>
</div>
<footer id="footer-wrap">
#footer-wrap
</footer>
</div>
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.
I have some webpages that do not have much content and the footer sits in the middle of the page, but I want it to be at the bottom.
I have put all my pages in a "holder"
#holder {
min-height: 100%;
position:relative;
}
And then used the following CSS for my footer
ul.footer {
margin-top: 10px;
text-align: center;
}
ul.footer li {
color: #333;
display: inline-block;
}
#footer {
bottom: -50px;
height: 50px;
left: 0;
position: absolute;
right: 0;
}
The html for my footer
<div class="container">
<div class="row">
<div class="span12">
<div id="footer">
<ul class="footer">
<li>Website built by Fishplate</li>
<li>Email:exampleemail#gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
I would like to keep the footer fluid.
just add the class navbar-fixed-bottom to your footer.
<div class="footer navbar-fixed-bottom">
Update for Bootstrap 4 -
as mentioned by Sara Tibbetts - class is fixed-bottom
<div class="footer fixed-bottom">
As discussed in the comments you have based your code on this solution: https://stackoverflow.com/a/8825714/681807
One of the key parts of this solution is to add height: 100% to html, body so the #footer element has a base height to work from - this is missing from your code:
html,body{
height: 100%
}
You will also find that you will run into problems with using bottom: -50px as this will push your content under the fold when there isn't much content. You will have to add margin-bottom: 50px to the last element before the #footer.
Most of the above mentioned solution didn't worked for me. However, below given solution works just fine:
<div class="fixed-bottom">...</div>
Source
http://bootstrapfooter.codeplex.com/
This should solve your problem.
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>
CSS:
html,body
{
height:100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
Here is an example using css3:
CSS:
html, body {
height: 100%;
margin: 0;
}
#wrap {
padding: 10px;
min-height: -webkit-calc(100% - 100px); /* Chrome */
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: calc(100% - 100px); /* native */
}
.footer {
position: relative;
clear:both;
}
HTML:
<div id="wrap">
<div class="container clear-top">
body content....
</div>
</div>
<footer class="footer">
footer content....
</footer>
fiddle
Use the bootstrap classes to your advantage. navbar-static-bottom leaves it at the bottom.
<div class="navbar-static-bottom" id="footer"></div>
It could be easily achieved with CSS flex.
Having HTML markup as follows:
<html>
<body>
<div class="container"></div>
<div class="footer"></div>
</body>
</html>
Following CSS should be used:
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
body > .container {
flex-grow: 1;
}
Here's CodePen to play with: https://codepen.io/webdevchars/pen/GPBqWZ
I have found a simple solution for this.
For body tag add
<body class="d-flex flex-column min-vh-100">.
On footer tag add class
mt-auto
The entire code looks as follows
<html>
<head> </head>
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid"></div>
<footer class="mt-auto"></footer>
</html>
This is working for bootstrap 4+ and tested till 5 beta 1