Css Footer Not Displaying At The Bottom Of The Page

March 31, 2024 Post a Comment

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;

Solution 1:

There's really two main options:

Fixed Footer - the footer always is visible at the bottom of the page
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.

Solution 2:

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:

<footerclass="footer"></footer>

Solution 3:

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

<body><header><ul><li><ahref="#">Home</a></li><li><ahref="#">link1</a></li><li><ahref="#">link2</a></li><li><ahref="#">link3</a></li><li><ahref="#">link4</a></li></ul></header><divclass="wrapper"><divclass="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 00;
    padding:40px0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
headerulli {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
headerullia {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footerh1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 015px;
  z-index: 1;
}

Solution 4:

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 shortto 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, andset the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This isto 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%;
}

.demoh1 {
  margin-top: 0;
}

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

Solution 5:

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

So HTML:

<body><divclass="top-nav">My Nav Bar</div><divclass="main-container">
        All my content
    </div><divclass="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.

Html5 Developer