Footer always at the bottom of the page

Question

I want to know how to leave the footer always at the bottom of the screen, even on small screens.

I’m wearing a bootstrap.

This way:

I want to leave the footer always at the end of the page independent of the content in the white part and independent of the screen size.

Could someone help me? I saw several solutions on the internet, including here in the forum (How to keep my footer down?) but no solution worked.

My CSS is like this:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
footer { background-color:#0c1a1e; min-height:350px; font-family: 'Open Sans', sans-serif; }
.footerleft { margin-top:50px; padding:0 36px; }
.logofooter { margin-bottom:10px; font-size:25px; color:#fff; font-weight:700;}

.footerleft p { color:#fff; font-size:12px !important; font-family: 'Open Sans', sans-serif; margin-bottom:15px;}
.footerleft p i { width:20px; color:#999;}


.paddingtop-bottom {  margin-top:50px;}
.footer-ul { list-style-type:none;  padding-left:0px; margin-left:2px;}
.footer-ul li { line-height:29px; font-size:12px;}
.footer-ul li a { color:#a0a3a4; transition: color 0.2s linear 0s, background 0.2s linear 0s; }
.footer-ul i { margin-right:10px;}
.footer-ul li a:hover {transition: color 0.2s linear 0s, background 0.2s linear 0s; color:#ff670f; }

.social:hover {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -o-transform: scale(1.1);
 }

 body {
    min-height: 100%;
    position: relative;
 }


html {
    height: 100%;
    min-height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

footer {
    margin-top: auto;
}

 .icon-ul { list-style-type:none !important; margin:0px; padding:0px;}
 .icon-ul li { line-height:75px; width:100%; float:left;}
 .icon { float:left; margin-right:5px;}


 .copyright { min-height:40px; background-color:#000000;}
 .copyright p { text-align:left; color:#FFF; padding:10px 0; margin-bottom:0px;}
 .heading7 { font-size:21px; font-weight:700; color:#d9d6d6; margin-bottom:22px;}
 .post p { font-size:12px; color:#FFF; line-height:20px;}
 .post p span { display:block; color:#8f8f8f;}
 .bottom_ul { list-style-type:none; float:right; margin-bottom:0px;}
 .bottom_ul li { float:left; line-height:40px;}
 .bottom_ul li:after { content:"/"; color:#FFF; margin-right:8px; margin-left:8px;}
 .bottom_ul li a { color:#FFF;  font-size:12px;}

Remembering that I am using bootstrap, so in addition to this CSS has the bootstrap pattern.

Grateful!

Answer 1

From what I understand you nay want it fixed and yes that does not stay the spacing blank, in this case you will have to match position: relative with absolute, is not at all obscure, it is enough that the "parent" element (usually a container) is in relative, would look something like:

html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
}

.container {
    position: relative; /*faz a mágina :)*/
    min-height: 100%; /* define a altura minima*/
    background: #fcfcfc;
}

.footer {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}

<div class="container">
    <!--// resto do html -->
    
    <div class="footer">Rodapé</div>
</div>

Of course if the text passes the footer then it will be cut, but for this you can create an element that compensates, in case could do with ::before (which is a pseudo-element) or you can use display: flex

---

With ::before (or ::after)

I created an example, note that by clicking the button Show/Hide content the content of the page, minus the footer, is missing. However the footer remains fixed at the end of "view-port", if you re-display the content by clicking the button again the footer will stay below the content:

/* Isto é apenas para testar como o rodapé funciona, quando tem conteúdo e quando não tem */

var toggle = document.getElementById("toggle");
var exemplo = document.getElementById("exemplo");

toggle.onclick = function () {
    if (exemplo.className == "hide") {
        exemplo.className = "";
    } else {
        exemplo.className = "hide";
    }
};

html,body {
    height: 100%;
    padding: 0;
    margin: 0;
}

.container {
    overflow: hidden; /*remove a margem vinda de elementos interno, não pode ter height fixo*/
    position: relative;
    min-height: 100%;
    background: #fcfcfc;
}

.footer::before, .footer-inner {
     height: 100px;
}

.footer::before {
    content: " ";
    display: block;
}

.footer-inner {
   background: #0c0c0c;
   color: #fff;
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
}

/* esta parte abaixo é apenas para testar como o rodapé funciona, quando tem conteudo e quando não tem */

.hide {
     display: none;
}

<div class="container">
    <!--// resto do html -->
    <button id="toggle">Mostrar/Ocultar conteúdo</button>

    <div id="exemplo" class="section">
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
    <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>1</p>
    </div>
  
    <div class="footer">
        <div class="footer-inner">Rodapé</div>
    </div>
</div>

With display: flex

Note that the element footer should not have the property flex:, the footer should have only the height: and the main in the example I used flex: 1 so that it tries to take up the whole space, only it will not take up the footer space.

If the content exceeds the height the footer will follow the height, always below.

Following example:

var toggle = document.getElementById("toggle");
var exemplo = document.getElementById("exemplo");

toggle.onclick = function () {
    if (exemplo.className == "hide") {
        exemplo.className = "";
    } else {
        exemplo.className = "hide";
    }
};

html,body {
    height: 100%; /* é necessário definir o height 100% no html, body ou qualquer elemento que estiver entre o body e o .container */
    padding: 0;
    margin: 0;
}

body {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   width: 100%;
   height: 100%;
}

body > .main {
    flex: 1; /*ocupa todo espaço menos a altura do footer */
}

body > .footer {
    min-height: 100px;
    background: #0c0c0c;
    color: #fff;
}

/* esta parte abaixo é apenas para testar como o rodapé funciona, quando tem conteudo e quando não tem */

.hide {
     display: none;
}

<div class="main">
    <button id="toggle">Mostrar/Ocultar conteúdo</button>

    <div id="exemplo">
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>baz</p>
        <p>foo</p> <p>bar</p> <p>baz</p> <p>foo</p> <p>bar</p> <p>1</p>
    </div>

</div>
<div class="footer">Rodapé</div>

Answer 2

I didn’t understand if you want the footer at the end of the content or fixed stuck at the bottom of the screen. But as you have already been given examples of the first option, I have already explained how to do the second:

body {
  width: 100%;
  height: 300vh;
  margin: 0;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  /* ou % */
  height: 100px;
  background: black;
}

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed massa malesuada, sollicitudin tortor id, luctus orci. Pellentesque congue scelerisque massa, eget finibus erat placerat nec. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
    finibus id lorem ullamcorper volutpat. Proin sit amet sodales massa. Aliquam maximus urna orci, id mollis nisi eleifend eget. Morbi porttitor sed libero a euismod. Aenean nulla mi, porta vitae faucibus in, malesuada vel augue. Sed purus nulla, pretium
    eget imperdiet luctus, sollicitudin id turpis. Fusce pellentesque ligula nulla.</p>

  <p>Ut in est vehicula, iaculis dui vel, cursus dolor. Proin vitae diam eu sem sollicitudin gravida. Proin laoreet malesuada nibh. Mauris feugiat mattis arcu nec varius. Nulla pellentesque semper felis a feugiat. Etiam fermentum orci eget arcu egestas dapibus.
    In accumsan dolor diam, sit amet aliquam ligula luctus a. Integer consequat blandit erat eget tincidunt. Vivamus a arcu eleifend, mollis lorem eget, viverra neque. Morbi rutrum ullamcorper interdum. Fusce ac magna eros. Aenean in finibus arcu. Aenean
    efficitur mi erat, ut sagittis nisl egestas nec.</p>

  <p>Sed vulputate luctus rhoncus. Nullam nec enim sed sem viverra cursus eget in felis. Aenean mauris risus, rutrum vel fermentum et, auctor at tortor. Proin a ante ex. Suspendisse porttitor euismod lorem ac commodo. Aliquam dictum in sapien eget mollis.
    Donec dictum nunc ut mauris vehicula, vitae consequat sapien ultricies.</p>

  <p>Etiam luctus lectus ac mi auctor, ut varius metus scelerisque. Suspendisse ac congue elit. Pellentesque scelerisque eget risus non pretium. Donec pellentesque, neque quis euismod mollis, nunc lectus scelerisque turpis, at suscipit ex ligula eget risus.
    Nunc non enim a turpis lobortis lobortis. Suspendisse laoreet dictum massa. Donec vulputate pulvinar sem, non maximus leo eleifend sit amet. Vestibulum ac enim quis felis tristique sagittis vel id ligula. Nunc ut porta libero. Cras vehicula diam eu
    interdum pulvinar.</p>

  <p>Donec faucibus metus id bibendum rutrum. Donec non luctus est, et sollicitudin leo. Etiam eu nibh ligula. Cras vitae hendrerit velit. Aliquam sed nibh faucibus, rutrum justo nec, dictum sapien. Sed eget dapibus ante, sit amet maximus elit. Vestibulum
    tincidunt magna sit amet ipsum porta congue. Donec gravida efficitur finibus. Quisque ac metus vitae arcu luctus scelerisque et eu urna. Praesent id risus tincidunt, aliquam ante vel, pretium nibh. Nulla facilisi. Mauris volutpat eu ipsum id viverra.
    Mauris molestie mi at vulputate auctor. Cras id odio ligula. Pellentesque id sodales ipsum.</p>

  <p>Donec venenatis magna vel neque aliquet ultricies. Nulla lobortis ipsum id mi mattis sodales. Ut quis tellus eu erat lacinia scelerisque. Pellentesque eu nulla massa. Duis id tincidunt tellus. Nullam ante felis, efficitur et cursus id, semper et neque.
    Aenean fermentum fermentum commodo. Nam ut dui ut lorem sollicitudin pharetra.</p>

  <p>Nunc non posuere orci. Vestibulum gravida vestibulum aliquet. Curabitur iaculis convallis elit et venenatis. Sed sed eros sed ex ullamcorper ornare. Proin in ligula metus. Phasellus sem enim, accumsan eu tristique viverra, hendrerit a sem. Maecenas
    vehicula consectetur auctor.</p>

  <p>Suspendisse lobortis, massa a finibus consequat, felis justo tincidunt libero, non venenatis est velit id elit. Curabitur dignissim luctus velit, sed vulputate eros porttitor eu. Fusce nec libero non dolor aliquam efficitur. Curabitur vel tempus est,
    nec elementum ipsum. Praesent scelerisque volutpat maximus. Donec vitae porta ex. Sed vel lacus venenatis diam pretium euismod. Curabitur eget nunc ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Etiam congue, mauris et pellentesque euismod, urna mi tincidunt erat, eget vestibulum eros justo id est.</p>

  <p>Maecenas consequat volutpat leo sit amet lacinia. Nulla feugiat molestie felis, in dapibus odio accumsan vitae. Vestibulum et gravida sapien, placerat euismod erat. Nulla imperdiet sapien eu facilisis sagittis. Etiam suscipit eget nibh in ullamcorper.
    Ut eu maximus elit, et dictum lacus. Maecenas facilisis turpis ornare aliquet sodales. Aenean id elit placerat, dapibus quam non, vestibulum neque. Donec tincidunt blandit ligula, quis convallis risus elementum non. In viverra eros neque, in dapibus
    turpis dapibus sit amet. Nulla sed lectus ac tortor ultrices rhoncus tempus euismod dolor. Sed interdum convallis semper. Vivamus fermentum in ipsum vel fermentum. Sed magna mi, gravida eget rhoncus non, porttitor ut ex. Praesent vel metus ultricies,
    faucibus arcu et, pharetra purus.</p>

  <p>Suspendisse vitae porta nulla. Duis eu orci ut velit malesuada laoreet. Proin convallis massa quis ligula congue, sit amet scelerisque est placerat. Suspendisse a lorem lacinia, porttitor neque et, tincidunt orci. Nullam ex mauris, lacinia non cursus
    vitae, porttitor luctus quam. Vivamus finibus egestas fermentum. Proin ut pellentesque mi. Fusce a leo turpis. Aliquam porta nec lacus sit amet porta. Sed euismod a lacus sed maximus. Maecenas ex felis, lobortis sed pharetra ut, congue quis ante.
    Quisque vitae cursus lacus. Suspendisse bibendum, dui sit amet cursus molestie, enim ligula vehicula ex, congue dapibus nisi est in velit. Nullam aliquam purus id arcu eleifend, eget molestie arcu ullamcorper. Donec eu porta ligula, ut dictum nulla.
    Ut mollis, felis sit amet bibendum pellentesque, arcu velit vestibulum magna, et pharetra turpis justo eu tortor.</p>

  <p>Donec hendrerit feugiat felis vel lobortis. Proin aliquam pharetra dolor et posuere. Suspendisse varius ligula sit amet lacus efficitur, at faucibus velit volutpat. Morbi ultricies non nisl sit amet elementum. Mauris vitae turpis non erat mattis efficitur.
    Maecenas sollicitudin sit amet libero et convallis. Morbi porta erat ante, sed porttitor magna posuere ut. Maecenas hendrerit velit purus, quis vulputate massa pulvinar vel. Maecenas ligula velit, viverra eget nulla eget, blandit fermentum ex. Cras
    id tortor dolor. Duis rutrum mattis feugiat. Morbi tincidunt id mauris nec pellentesque. Donec in iaculis ex.</p>

  <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque nunc orci, maximus vel sagittis in, ultrices fermentum ante. In a orci massa. Etiam quis eros risus. Fusce facilisis blandit vulputate. Praesent sed auctor ex, non egestas urna.
    Nullam maximus, nibh sed suscipit molestie, libero est pulvinar enim, maximus tristique neque sem vitae odio. Nam blandit lorem ut ipsum sagittis volutpat. Sed sagittis dignissim odio, at tincidunt urna rhoncus ac. Integer tincidunt risus sed ligula
    imperdiet tincidunt. Quisque tempus viverra mi, sit amet volutpat tellus blandit id. Aenean vel tortor ac nulla scelerisque volutpat.</p>

  <p>Suspendisse porta faucibus pharetra. In tincidunt justo at leo ultricies, ut vulputate odio egestas. Integer cursus, orci vitae mattis pharetra, nibh felis elementum purus, non mattis risus ex vel mauris. Vivamus sit amet arcu vitae risus tempus eleifend
    quis quis ex. Quisque efficitur porttitor massa, finibus pharetra odio hendrerit et. Sed mi diam, suscipit sed augue ac, mollis maximus turpis. Nullam suscipit eu nulla a vulputate. Donec ornare lectus non velit semper, tempor sagittis tortor consequat.
    Duis condimentum tortor id velit vehicula vehicula. Sed sed porttitor ligula. Nulla finibus, ipsum a lobortis porttitor, enim neque pulvinar diam, at convallis dolor felis nec nulla. Nulla ultricies placerat erat eget efficitur. Nunc ultricies turpis
    sed ipsum faucibus efficitur. In commodo nisi a massa vulputate, ac porttitor odio interdum. Aenean quam enim, malesuada sit amet eros sed, placerat fringilla tortor. Nulla tincidunt velit justo, vel dictum elit lobortis sed.</p>

  <p>Donec a accumsan erat, quis porta mi. Vestibulum sagittis malesuada dolor nec ornare. Mauris lacus ex, malesuada non nibh vitae, tincidunt malesuada lectus. Etiam maximus leo ut rhoncus suscipit. Ut vitae ex vel libero tincidunt convallis eu quis dui.
    Fusce condimentum, lectus et cursus vestibulum, dolor lorem vestibulum dolor, nec viverra tortor enim ut elit. Maecenas dignissim pretium metus, at porta erat egestas ac. Proin ut malesuada leo. Sed blandit rhoncus risus vel placerat. Nullam dignissim
    elit orci, id iaculis nibh pulvinar id. Nullam non sapien dui. Vivamus lacus sem, accumsan at mattis eget, pellentesque eu ligula. Donec tincidunt risus elit. Morbi sapien dui, elementum sit amet massa vel, vestibulum elementum lorem.</p>

  <p>Quisque nec egestas quam. Maecenas in aliquet eros, ac tincidunt dolor. Morbi eleifend turpis sed bibendum congue. Fusce ante sem, cursus in placerat quis, faucibus eget sem. Suspendisse molestie malesuada est, eget mollis orci tempus nec. Maecenas
    neque lectus, porttitor nec rutrum sit amet, lobortis at lacus. Quisque sed dignissim sapien. Sed sed ultricies eros, a scelerisque ante.</p>

  <p>Aliquam erat volutpat. Proin varius ullamcorper arcu, sed pretium metus consectetur ac. Nulla congue mauris sed felis pharetra, et egestas lorem commodo. Proin non dui nisi. Etiam odio nisl, gravida a arcu sit amet, euismod accumsan sem. Aliquam massa
    nisi, condimentum quis lobortis vel, porttitor dapibus turpis. Ut convallis quis augue eget egestas. Etiam ultrices dolor facilisis luctus pellentesque. Integer nunc orci, pretium sed tincidunt nec, interdum sed nunc. Etiam id orci nunc.</p>

  <p>Donec dignissim eleifend erat, eget pharetra turpis interdum at. Maecenas ac augue ipsum. Donec eget diam pretium, sodales risus pulvinar, congue est. Fusce hendrerit ipsum quis posuere rutrum. Integer vestibulum turpis turpis, tristique dictum quam
    tincidunt malesuada. Sed libero diam, dictum vel lacinia vitae, lacinia ut turpis. Nullam sodales urna non tortor fringilla, eget mollis augue ullamcorper.</p>

  <p>Nullam convallis sollicitudin convallis. Phasellus pretium dapibus efficitur. Cras pretium ullamcorper turpis, sed porttitor nibh tempus molestie. Fusce pharetra dui at leo pellentesque fermentum. Aliquam erat volutpat. Donec commodo velit eu pellentesque
    tempus. Fusce justo turpis, sagittis a aliquam ac, cursus ac enim. Nunc accumsan leo eget augue mattis mattis. Vivamus efficitur tortor nec ex blandit, eget vulputate purus semper. Sed vehicula cursus gravida. Sed nec lorem fermentum, iaculis ipsum
    eu, tempor nibh. Sed non finibus diam. Vivamus cursus consequat convallis.</p>

  <p>Integer rhoncus diam ipsum, eget euismod neque tincidunt fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vel mauris a ante suscipit fermentum. Nullam ultricies massa eu est vulputate, a viverra
    tortor pharetra. Etiam a nulla leo. Vestibulum sit amet hendrerit augue. Praesent condimentum dui venenatis, volutpat turpis nec, consectetur quam. Duis nec quam et sem mattis convallis. Sed eget nisl a elit sagittis facilisis. Etiam id metus varius,
    fringilla quam ac, bibendum odio. Praesent sollicitudin elementum mattis.</p>

  <p>
    <p>Phasellus mi lacus, commodo quis sodales eget, interdum sit amet dolor. Aenean porttitor pretium aliquet. Nulla sodales convallis libero et lobortis. Vivamus nunc purus, tincidunt non justo sed, varius rutrum diam. Nunc porta nibh vitae ex porta tristique.
      Mauris ac interdum quam, at tincidunt purus. Curabitur sagittis ex ultricies venenatis tempor. Etiam non metus vitae sem lobortis vehicula. Phasellus eu rhoncus dui. Nunc nunc metus, cursus in pellentesque eu, egestas sit amet leo. Donec placerat
      nunc id velit porttitor dictum.</p>

    <p>Praesent feugiat, nulla rhoncus maximus euismod, mi risus sodales elit, et convallis eros ex in turpis. Curabitur in dapibus augue. Sed id lobortis leo. Morbi cursus orci velit, sed vulputate augue mattis ut. Donec tristique ante metus, et porttitor
      dui mattis at. Donec a efficitur tortor. Curabitur lobortis lorem a magna volutpat malesuada. Vestibulum auctor, purus quis viverra faucibus, nunc est ornare odio, eget sagittis risus leo at nisl. In orci sapien, luctus vitae vulputate et, faucibus
      non ligula. Quisque tempus lacus vel tortor tristique, at convallis lectus sagittis. Cras efficitur ut felis vel semper. Cras lacinia velit eros, at congue nulla ultricies at.</p>

    <p>Suspendisse scelerisque nulla velit, blandit congue leo posuere id. Aliquam pretium a erat non blandit. In hac habitasse platea dictumst. Suspendisse at congue libero, aliquam tristique nisl. Vestibulum aliquet ligula facilisis nisi vestibulum fermentum.
      Cras consectetur tortor id urna luctus efficitur. Aliquam erat volutpat. Morbi sit amet vehicula nisl, sit amet blandit justo. Nulla nec eros nec nibh sollicitudin maximus. Vestibulum pretium luctus risus, et aliquet enim pellentesque at. Curabitur
      elementum nisi ipsum, sit amet lacinia purus placerat quis. Pellentesque eu porta erat. Curabitur ac blandit lacus. Ut condimentum iaculis quam eget eleifend. Proin vitae mi pharetra, congue justo quis, aliquet urna.</p>

    <p>Suspendisse vel enim quis nunc sollicitudin rhoncus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum justo orci, efficitur vel aliquet et, efficitur vel libero. Fusce id sem ut leo auctor maximus.
      Pellentesque nec mattis lectus. Proin ac malesuada leo. Donec diam massa, rutrum quis lobortis eu, suscipit sit amet massa. Nulla vel congue lectus. Sed ut dui egestas purus finibus porta. Duis eu vehicula tellus, eget euismod dui. Vestibulum ante
      ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas ullamcorper quam non nunc elementum mattis. Donec gravida tortor sed justo semper, et faucibus sapien efficitur. Pellentesque a aliquet magna. Cras tincidunt nulla
      ac lacus molestie tincidunt.</p>

    <p>Aenean faucibus posuere ullamcorper. Sed eget leo vitae tortor porta venenatis. Aenean venenatis arcu leo, quis congue enim malesuada et. Vestibulum a sem vel mi facilisis volutpat. Vivamus laoreet tortor est, eget cursus lectus accumsan ut. Proin
      quis tempus ipsum. Donec sed dui eu mi ornare convallis.</p>

    <p>Praesent ornare eros ut lacus venenatis commodo. Praesent cursus porta urna at sagittis. Curabitur vel urna lectus. Integer pulvinar risus sit amet ante scelerisque, id ultricies eros placerat. Quisque et risus vel ipsum feugiat gravida. Fusce vel
      lorem dapibus, sollicitudin nisl ac, blandit est. Sed ac imperdiet nisi, et sollicitudin ipsum. Duis sodales nunc ut orci scelerisque, in porttitor mauris congue. Mauris erat libero, elementum ac egestas sed, tincidunt id risus. Duis nec blandit
      erat, at pellentesque arcu.</p>

    <p>Maecenas lacinia cursus lacus sit amet auctor. Sed fermentum ligula et eros sagittis semper. Curabitur eget nunc nec nisl molestie congue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ultricies
      nisi et consectetur imperdiet. In quis magna ultricies, condimentum lacus quis, dignissim felis. Aliquam eget dapibus metus. Etiam condimentum hendrerit est, laoreet vestibulum metus posuere id. Nam volutpat vulputate venenatis. Duis tincidunt dignissim
      tortor, sed convallis massa semper sit amet. Cras vitae auctor leo, ac feugiat urna. Sed ac suscipit augue, quis malesuada turpis.</p>

    <p>Ut interdum tempor nisl non lacinia. Quisque non accumsan velit. Suspendisse tellus justo, fermentum sed tempus eu, tempus vitae purus. Morbi sed ex auctor mi fringilla dictum. Donec eleifend vestibulum purus, nec tristique quam auctor non. Sed luctus
      luctus orci, sit amet venenatis lorem blandit in. Aliquam sed laoreet lorem. Vestibulum pulvinar ex id lorem congue, egestas sollicitudin est dapibus. Aliquam id ultricies massa, in pharetra velit.</p>

    <p>Suspendisse iaculis quam urna, a commodo mi viverra sit amet. Nullam tempus tellus id dictum venenatis. Nunc lobortis porttitor dui non iaculis. Duis pretium convallis mi, eget aliquam nisi faucibus in. Vestibulum eget metus egestas, malesuada diam
      non, accumsan mauris. Aliquam accumsan nisl a orci dapibus viverra. Duis sed dolor a magna posuere mollis id sed justo. Etiam pulvinar ornare enim. Fusce ac sollicitudin sem. Aenean elementum neque eu fermentum pulvinar. Maecenas accumsan tortor
      a libero mattis, vitae pulvinar nunc gravida. Nam finibus lacus id sem maximus vehicula. Nam sed felis in lorem mollis lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eget risus mauris.</p>

    <p>Proin porttitor consequat nisl, sit amet malesuada massa lobortis eget. Aenean enim libero, volutpat sit amet quam a, venenatis porttitor ante. Donec in tellus justo. Maecenas congue diam volutpat, feugiat ex sit amet, tempor lectus. Duis sed fermentum
      ex, ut convallis est. Cras eu mollis quam, ac aliquam dui. Cras interdum aliquam pulvinar. Etiam quis blandit nisi. Donec eu enim et nisl ultrices dapibus sed ac nunc. Phasellus massa sem, tristique egestas leo quis, tincidunt posuere odio. Nam
      nec efficitur nibh, at hendrerit ante.</p>

    <p>Aliquam eu nisi et nisi fringilla ornare at nec enim. Cras scelerisque tempus nisl placerat molestie. Aenean aliquet arcu ac libero lacinia, vitae condimentum neque sollicitudin. Nam blandit placerat vehicula. Phasellus interdum egestas est, sit amet
      ullamcorper nisl posuere vel. Nam egestas nisl sit amet sem placerat, sit amet fringilla massa porta. Curabitur non accumsan ipsum. Vivamus dignissim, arcu vel ultricies dapibus, massa enim finibus dolor, vitae pellentesque velit lectus mattis lectus.</p>
    <footer>
    </footer>
</body>

Answer 3

The cat jump is in the new vh css measure (probably Viewheight) see this example with flex box

*{padding: 0px; margin: 0px} css for zeroing margin and padding! otherwise the footer passes the screen.

<div style="height: 100vh; display: flex; flex-direction: column">

        <div style="background: #c3c3c3">
            Menu
        </div>
        <div style="flex-grow: 1">
            Corpo
        </div>
        <div style="background: #c3c3c3">
            Rodapé
        </div >

</div>

you can use percentages in the Heights of Divs, but using flex-Grow, from to leave headers and footers fixed, and only the height of the body varying!

Answer 4

You didn’t post your HTML, but if you are using bootstrap, you can simply create a new Row below the body of the page. Do something like this in your HTML:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            Aqui seu menu.
        </div>
    </div>

    <div class="row">
        Aqui o corpo da página.
    </div>

    <div class="row" id="footer">
        Aqui meu rodapé
    </div>
</body>