Make a DIV element stand as a footer

Asked

Viewed 56 times

2

This is an example of what I’m trying to adjust:

* {
   margin: 0;
   padding: 0;
}
html,body {
   height: 100%;
}
#topo {
   background: limegreen;
   position: static;
   left: 60px;
   top: 35px;
   width: 100%;
   line-height: 200px;
}
#conteudo {
   background: white;
   border: 1px solid silver;
   position: absolute;
   left: 15%;
   top: 15%;
   margin: 0 auto;
   width: 70%;
   height: auto;
}
#rodape {
   bottom: 0;
   width: 100%;
   line-height: 50px;
   position: relative;
   background: limegreen;
   text-align: center;
}
<div id="topo">
   <h1>Titulo</h1>
</div>
<div id="conteudo">
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
</div>

<div id="rodape">RODAPE</div>

Note that I am trying to remain the div called as footer, below the div calling for contents.

The task can be done using both CSS and Javascript, as long as you do not drastically change the layout here arranged in the example. For the design reflects the actual design, and altering it unexpectedly will cause in a re-design.

So I want to know what can be done. It is noteworthy that the rule fixed is not welcome in case.

javascript css div positioning footer

  • But you want the footer to be exactly below the content or fixed at the bottom of the screen?

  • One way to settle this would be with Flexbox, for you would be bad to use it? Better than using float.

  • That’s what @hugocsl posted as a response using flexbox.

2 answers

2

Follow an answer using flex.

Now the top always gets nailed to the top, the footer always gets nailed to the bottom regardless of content size.

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
    overflow-y: auto;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

#topo {
    background: limegreen;
    width: 100%;
    line-height: 200px;
}

#conteudo {
    background: white;
    border: 1px solid silver;
    position: relative;
    margin: 16px auto;
    width: 70%;
    height: auto;
}

#rodape {
    bottom: 0;
    width: 100%;
    line-height: 50px;
    background: limegreen;
    text-align: center;
    -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
}
<div id="topo">
    <h1>Titulo</h1>
</div>
<div id="conteudo">
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
</div>
<div id="rodape">RODAPE</div>

1


Solution using Javascript. I commented on some lines of CSS and changed others. I created two events onload and onresize calling a function that positions the footer according to the top position, content and height of the window.

document.addEventListener("DOMContentLoaded", function(){

   window.onload = ajusta_rodape;
   window.onresize = ajusta_rodape;

   function ajusta_rodape(){
      var c = document.querySelector("#conteudo").clientHeight; // altura do conteúdo
      var t15 = (window.innerHeight/100) * 15; // calcula os 15%
      var r = document.querySelector("#rodape"); // pega elemento do rodapé
      r.style.top = c+t15 +"px"; // ajusta a altura
   }
   
});
* {
   margin: 0;
   padding: 0;
}
/* html,body {
   height: 100%;
} */
#topo {
   background: limegreen;
   /* position: static;
   left: 60px;
   top: 35px; */
   width: 100%;
   line-height: 200px;
}
#conteudo {
   background: white;
   border: 1px solid silver;
   position: absolute;
   left: 15%;
   top: 15%;
   /* margin: 0 auto; */
   width: 70%;
   height: auto;
}
#rodape {
   /* bottom: 0; */
   width: 100%;
   line-height: 50px;
   /* position: relative; */
   position: absolute;
   background: limegreen;
   text-align: center;
}
<div id="topo">
   <h1>Titulo</h1>
</div>
<div id="conteudo">
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum</p>
   <p>lorem ipsum fim</p>
</div>
<div id="rodape">RODAPE</div>

Browser other questions tagged javascript css div positioning footer

You are not signed in. Login or sign up in order to post.