Make a DIV element be positioned as a footer

Question

Make a DIV element be positioned as a footer

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

Here's 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'm trying to stay at div named as footer , below div called content .

The task can be done using both CSS and Javascript, as long as it does not drastically change the layout here provided in the example. Because the design reflects the actual design, and changing it will unexpectedly lead to a re-design .

So I want to know what can be done. It should be noted that the fixed rule is not welcome for the case.

javascript css div posicionamento footer

asked by anonymous 25.05.2018 / 19:08

2 answers

2

Follow a response using flex .

Now the top is always nailed to the top, the footer always nails the base regardless of the size of the content.

* {
    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>

25.05.2018 / 19:34

Read from a predefined line in txt Delete in 2 tables at the same time in a single query

score 1 · Accepted Answer

Solution using JavaScript. I commented some CSS lines and changed others. I created two events onload and onresize that call a function that positions the footer according to the position of the top, 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>