CODEWITHSUNDEEP
htmlcss
user2135867
user2135867

Reputation:

css footer not displaying at the bottom of the page

this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?

/*footer */
#footer .column {
    float: left;
    width: 25%;
}

#footer .column div {
    margin: 5px;
    height: 200px;
    background: #eeeeee;
}

<div id="footer">
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
    <div class="column"><div></div></div>
</div>

Note: This does NOT need to be a fixed footer

Upvotes: 26

Views: 135376

Answers (11)

Himanshu Ranka
Himanshu Ranka

Reputation: 1

Just use flex-box: By setting the body display to flex and then aligning the footer to flex end. This way the footer will always be the last component at the end.

body {
   display: flex;
   flex-direction: column;
}

footer {
  align-self: flex-end;
}

Upvotes: 0

Ars Khatri
Ars Khatri

Reputation: 44

You need to set the height of the parent after the footer automatically sets their position at the bottom.

if you can't add content or height in parent div or section of footer after this problem occurs.

Upvotes: 0

xinthose
xinthose

Reputation: 3820

Material Design Bootstrap has a great class: fixed-bottom. It is what I use.

Upvotes: 0

Zumo
Zumo

Reputation: 510

if anyone is stuck with this again, this is a modern solution without hacks

HTML:

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>

CSS: 

/**
 * Demo Styles
 */

html {
  height: 100%;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Upvotes: 4

CodyBugstein
CodyBugstein

Reputation: 23312

I solved this by simply using min-height on the main container of my HTML.

So HTML:

<body>
    <div class="top-nav">My Nav Bar</div>
    <div class="main-container">
        All my content
    </div>
    <div class="footer">
        My footer
    </div>
</body>

and then CSS

.top-nav {
    height: 4rem;
}
.main-container {
    min-height: calc(100vh - 4rem - 4rem);
}
.footer {
    height: 4rem;
}

With SCSS you can use variables to track the top-nav and footer heights and then do something like

.main-container {
  min-height: calc(100vh - #{$top-nav-height} - #{$footer-height});
}

This is not a perfect solution because it won't put your footer exactly at the bottom of the viewport but it will push it down to the bottom when the content is too short and prevents the footer from being way up in middle of the screen.

Upvotes: 1

shadowsora
shadowsora

Reputation: 703

Bootstrap have an example of a footer that sticks to the bottom of the page here: https://getbootstrap.com/examples/sticky-footer/

Here is the CSS:

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

Then in the HTML:

<footer class="footer">

</footer>

Upvotes: 10

kulbhushan charaya
kulbhushan charaya

Reputation: 119

Fixed your footer in bottom with cool effect
Check full page design in jsfiddle Jsfiddle

<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</header>
<div class="wrapper">
<div class="demo">
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
<hr>
<h1> H1</h1>
<h2> h2</h2>
<h3> h3</h3>
<h4> h4</h4>
<h5> h5</h5>
<h6> h6</h6>
</div>
</div>
<footer>
    <h1>kulbhushan charaya</h1>
</footer>
</body>

and css is

body {
    background: #ffffff none repeat scroll 0 0;
    padding:40px 0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
header ul li {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
header ul li a {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footer h1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 0 15px;
  z-index: 1;
}

Upvotes: 5

Scott Bartell
Scott Bartell

Reputation: 2840

There's really two main options:

  1. Fixed Footer - the footer always is visible at the bottom of the page
  2. Pushed Footer - the footer is pushed to the bottom of the page even when the content doesn't fill the window

The easier of the two is the fixed footer.

Fixed Footer

To make the footer fixed, in CSS set the footer's position to fixed position:fixed and position the footer to the bottom of the page bottom:0px. Here's a code snippet from CSS-Tricks.

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Pushed Footer

A pushed footer is a bit trickier. Here's a great graphic showing why the footer doesn't stay at the bottom of the page when there isn't enough content:

Pushed Footer Issue Visual

Basically, the problem is happening because the footer element is 'pushed' under the element that is above it and the height of that element isn't as long as the height of the page. In order to fix this, you need to make sure that the footer gets 'pushed' down the full height of the page (minus the height of your footer).

Here's how to do it:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

Here's a more detailed tutorial on how to do it as well as the source of the code above.

And here's a working demo of the code from the same source.

Upvotes: 52

Terry
Terry

Reputation: 66103

I guess what you mean is that you would like the footer to remain at the bottom of the page, even when there is insufficient content on the page to fill the height of the viewport?

If that is the case, you can use this trick: CSS sticky footer - http://ryanfait.com/sticky-footer/, http://www.cssstickyfooter.com/ or http://css-tricks.com/snippets/css/sticky-footer/

The sticky footer trick typically relies on declaring a minimum-height on a wrapper div. This means that you will have to reformat your HTML code as follow:

<div id="wrap">
    <div id="content">
        /* Main body content */
    </div>
</div>

<div id="footer">
    /* Footer content here */
</div>

For the CSS:

html, body, #wrap {
    height: 100%;
}
#wrap {
    height: auto;
    min-height: 100%;
}
#content {
    overflow: hidden;
    padding-bottom: (footer height);
}
#footer { 
    position: relative;
    margin-top: -(footer height); /* Note the negative value */
    height: (footer height);
    clear:both;
}

If your footer may have variable height, you will have to set the bottom padding of #content, and top margin of #footer with JavaScript. The value depends on the computed height of the #footer element itself.

Upvotes: 0

stcheng
stcheng

Reputation: 141

#main {padding-bottom: 150px;} /* Should have the same value of footer's height */ 
#footer {position: relative; 
margin-top: -150px; /* footer's height */

Upvotes: 0

Stephen J
Stephen J

Reputation: 2397

you may need to set the html element height to 100%, otherwise your page itself will only be the necessary height for your content. I ran into this myself.

Upvotes: 0

Related Questions