title: Footer both fixed, and not covering content (without using explicit values)
body: <p>I'm pretty sure this will be (correctly) marked as a duplicate, because it's a very basic and newbie question, but I can't find the answer o.O</p>
  
  <p>What I want is a <strong>fixed</strong> footer, so I do this:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class = 'content'&gt;
    &lt;p&gt;content&lt;/p&gt;
    &lt;p&gt;content&lt;/p&gt;
    &lt;p&gt;More and more content&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;footer&gt;
      &lt;p&gt;footer.&lt;/p&gt;  
  &lt;/footer&gt;
  </code></pre>
  
  <p>Style:</p>
  
  <pre><code>.content {
      color:green;
  }
  
  footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100px;
  }   
  </code></pre>
  
  <p><strong>But</strong> this footer will "cover" my content, if the later is long enough. So I add 'margin-bottom:110px' to the .content, which ~equals to footer's height:</p>
  
  <pre><code>.content {
      margin-bottom: 110px;
  }
  </code></pre>
  
  <p>And it "works". But I would like to avoid explicitly setting the .content's margin to any particular absolute value. Primarily because the footer's height varies from page to page.</p>
  
  <p>Here is what I have now: <a href="https://jsfiddle.net/kpion/nmdsuca4/6/" rel="nofollow noreferrer">https://jsfiddle.net/kpion/nmdsuca4/6/</a>
  clicking the "change footer size" shows what I mean. </p>
  
  <p>Something like 
  .content {margin-bottom: calc(footer.height + 10px)} would be exactly what I want, if it worked.</p>
  
  <p>BTW, the javascript is there only to explain my issue, in reality I don't want to use javascript to achieve what I want.</p>
  
  <p>BTW2: please bear in mind that I really want the footer to be <strong>fixed</strong>, i.e. always there, visible. So most solutions where we scroll down and <em>then</em> see it, is not what I need. </p>