How do I center bottom align a div regardless the height of page?

Question

I have a problem with positioning a div to the bottom center.This is how my page looks like:

.fill{
    height:auto;
    min-height:100%;
    }

.container {
    min-height:80rem;
    height:auto;
    background: #c9c8c8;
    }

.parent{
    position:fixed;
    bottom:0px;
    width:100%; 
}

.child{
    width:100px; 
    margin:0px auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <div class="fill">
    <div class="container">
      <div class="parent">
        <div class="child">This is footer</div>
      </div>
    </div>
  </div>
</body>

but whenever I scroll the page, the div stays at the bottom of the screen, not page.

Whenever I try anything else, on pages that don't have content on full page, the div just stays under the last post (pretty often in the middle od page).

I would really appreciate your help. Thank you very much!

position: fixed does that, stick it to the screen even if you scroll. What do you want to achieve? A normal page with a footer at the bottom? You don't need to add positions if that's the case: the last element will go down. — Sergio Tx, Aug 29 '16 at 13:13
Is this what you are trying to achieve? http://stackoverflow.com/a/38915618/2003702 — thepio, Aug 29 '16 at 13:18
Yes I know, but whenever I have only a small content on a page, the last element wil end up in the middle of screen. — Mara Augustin, Aug 29 '16 at 13:19
In the link that I provided you with the footer will always stays at the bottom. No matter what the height of the content is. Also when the content area is over 100% height of the screen it will stay under the content. See JSFiddle and resize the screen: https://jsfiddle.net/thepio/rfy0a4Lt/ — thepio, Aug 29 '16 at 13:21
Thank you, I've tried this one too, but this time my footer stays at the place, where "the bottom of the page" is whenever it is loaded. That means that at start it is on the bottom but when I scroll the page it stays on the same place. It even overwrites the content that should be above it. — Mara Augustin, Aug 29 '16 at 13:32

Mohd Abdul Mujib · Accepted Answer · 2016-08-29T13:49:40.597

If you are considering the .container as "Page" and you want this div classed as footer to stick to the bottom of it, then just use the position:absolute; and bottom:0px; for the footer.

Also remember to set the position of the parent element, .container in our case as relative since the position:absolute; only gets activated if the element has a non static-ally position ancestor.

Also one thing to remember is that this "footer" will be overlapping the content of parent elements. You can workaround it by implementing a padding.

DEMO

serraosays · Answer 2 · 2016-08-29T14:44:47.457

3 Types of Footers

If you want a centered footer that just hangs out below the content you present, that's the default behavior of most browser layout engines. The footer code would be very simple, just give it a height, width and margin: 0 auto; like you've already done.

footer {
  background-color: #b8ffc9;
  height: 100px;  
  width: 200px;
  text-align: center;
  margin: 0px auto;
}

If you want a centered footer to stay at the bottom of the viewport, that's position: fixed with bottom: 0 - but you've already got that layout in your code so I'm assuming you know how to do that one ;)

footer {
  background-color: #b8ffc9;
  height: 100px;  
  width: 200px;
  text-align: center;
  margin: 0px auto;
  position: fixed:
  bottom: 0;
}

If you want a centered footer that is at the bottom of the viewport based on the height of the page content, you have to calculate the content and footer heights, subtract that from the viewport and adjust the margin-top of the footer dynamically with JS (I also added in a conditional check to make sure we aren't applying a negative top margin to footer in this example).

// 1- Calculate height of window
var windowHeight = window.innerHeight;

// 2- Get height of container and footer
var contHeight = $(".container").height();
var footerHeight = $("footer").height();

// 3- Add height of container and footer, subtract from visible window height. This will be the new margin-top
var footerTopMargin = windowHeight - (contHeight + footerHeight);

// 4- Check to make sure footerTopMargin isn't 0 
if (footerTopMargin <= 10) {
  footerTopMargin = 10;
}

// 5- Apply caluclated footerTopMargin to footer
$("footer").css("margin-top", footerTopMargin);

Working codepen example: http://codepen.io/staypuftman/pen/kXOqxx

So you want a footer that is centered to the bottom of content? Isn't that what I just gave you? — serraosays, Aug 29 '16 at 13:26
A. it's not me. B. He wants a footer that always **stick** to the bottom of the page no matter the page's height (or content). In other words, create 2 pages one with large content and one without content at all. The footer should looks the same in them both - stick to the bottom. — Mosh Feu, Aug 29 '16 at 13:31
Oh, I see. Push the footer to the bottom of the page when the content isn't 100% height. — serraosays, Aug 29 '16 at 14:22

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

In the following Snippet, the footer is persistently at the bottom of viewport and the rest of the layout scrolls vertically. The footer has been separated from everything and is the child of <body> and a sibling of the <main> and <header> elements. So the 1st level from <body> is:

</header>
</main>
</footer>

The 1st level determines how much of the page you want your layout to occupy. Well concentrate on the <main> branch. The 2nd level determines how the content is displayed. Typically this level will have the wrapper/container that has overflow properties set for scrolling content that extends beyond the edge of the viewport. The 2nd level is occupied by <article> and <hgroup>.

</hgroup>
</article>

The 3rd level and the levels that follow are content. There is a button labeled: content, which toggles the presence of the <section> elements. This demonstrates how the layout is with and without content. Keep in mind if you use position, you will most likely end up making the majority of your elements positioned as well. It's easier to use relative than absolute, trust me on that. Refer to this short article if you need to know the differences in position values.

SNIPPET

$('button').on('click', function() {
  $('.child').fadeToggle();
});

html,
body {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  font: 400 16px/1.428 Verdana;
  background: #444;
  color: #ede;
  position: relative;
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0 none transparent;
}
.main {
  height: 100vh;
  width: 100vw;
  background: #c9c8c8;
  overflow-y: scroll;
  overflow-x: hidden;
  position: relative;
  padding: 0 1.5em;
}
.article {
  min-height: 100vh;
  margin: 0 auto 15%;
  position: relative;
  width: 100%;
  padding: 1em;
  background: #e00;
}
.child {
  position: relative;
  width: 100%;
  margin: 0px auto 1.25em;
  padding: 2em;
}
section:last-of-type {
  margin-bottom: 3em;
}
.sec1 {
  background: yellow;
  color: black;
}
.sec2 {
  background: black;
  color: yellow;
}
.titles {
  line-height: 2;
  padding: 0 1em 2em;
}
.titles * {
  margin-bottom: 5px;
}
h1,
h2,
h3,
h4 {
  font-variant: small-caps;
  font-family: Tahoma;
}
h1 {
  font-size: 2rem;
}
.head h1 {
  display: inline-block;
  color: white;
  position: relative;
  top: calc(50% - 1rem);
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
p {
  font-size: 1.1rem;
}
.nav {
  position: relative;
  display: table;
  width: 80%;
}
a,
a:link:link,
a:visited:visited {
  margin: 0 1em;
  padding: 1em 0;
  display: table-cell;
  color: white;
  font-size: 1.4rem;
}
a:hover:hover,
a:active:active {
  color: yellow;
}
.head {
  font-size: 1.25rem;
  position: relative;
  width: 100%;
  border-bottom: 3px ridge grey;
  padding: 1em 2em 0;
  margin: 0 auto 1.25em;
  background: green;
}
.foot {
  display: table;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-top: 3px ridge grey;
  padding: 1em 2em;
  margin: 1.25em auto 0;
  height: 2.5em;
  min-height: 15%;
  background: blue;
  color: white;
}
.btn.btn {
  background: orange;
}
.btn.btn:active {
  color: black;
  background:yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>

  <header class='head'>
    <h1>Site Title</h1>
    <nav class='nav'>
      <a href='#/'>Link</a><a href='#/'>Link</a><a href='#/'>Link</a>
    </nav>
  </header>
  <main class="main">
    <hrgroup class='titles'>
      <h2>Article Title</h2>
      <h3>Byline</h3>
    </hrgroup>
    <article class='article'>
      <section class='child sec1'>
        <h3>Top Section 1</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <h4>End Section 1</h4>
      </section>
      <section class='child sec2'>
        <h3>Top Section 2</h3>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <h4>End Section 2</h4>
      </section>
    </article>
  </main>
  <footer class="foot">
    <h3 style='display:table-cell'>Footer</h3>
    <button class='btn'>Content</button>
  </footer>


</body>

How do I center bottom align a div regardless the height of page?

3 Answers3

SNIPPET