0

I am trying to recreate the answer to this question: CSS Sticky Footers with Unknown Height

So basically i want a sticky footer which has the ability to change it's height (dynamic). So I do not know the height.

Here is the codepen: http://codepen.io/basickarl/pen/ZQXJdQ?editors=110

i can't seem to get it to work.

html: 

<div class="wrapper">
  <div class="div1">
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
  </div>
  <div class="div2">
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
    roger<br>
  </div>
  </div>

css:

html, body {height: 100%;}

.wrapper {
  display: table; 
  width: 100%; 
  height: 100%;
}

.div1 {
  display: table-row;
  height: auto;
}
.div2 {
  display: table-row;
  background: red;
}
basickarl
  • 37,187
  • 64
  • 214
  • 335
  • Have you checked the other answers to the question? If I understood correctly, this seems to work: http://jsfiddle.net/g22x195z/ – fnune Jan 16 '16 at 01:32
  • @FaustoNA I must of misunderstood the term "sticky". Afaiak sticky means that the footer will always show all the time? – basickarl Jan 16 '16 at 01:33
  • Oh! I think I can do that. Sorry I understood you incorrectly. – fnune Jan 16 '16 at 01:34

2 Answers2

0

Updated answer: http://jsfiddle.net/3sLa37dv/

I'm sorry I completely misunderstood your first request, hope this fixes it.

I used a small jQuery snippet:

$(document).ready(function() {
   $('#content').css('margin-bottom', $('#footer').height() + 'px');
});

It adds margin-bottom:; to the #content by the height of the #footer. Good luck!

fnune
  • 5,256
  • 1
  • 21
  • 35
0

I suggest to use flexbox instead of tables.

.wrapper {
    display: flex;
    flex-direction: column;
}
.wrapper .div1 {
    flex: 1;
}

See flexboxfroggy.com to learn more about flexbox.

seahorsepip
  • 4,519
  • 1
  • 19
  • 30