2

Tenho o seguinte footer:

<footer class="page-footer font-small footer-fundo-cinza">
    <div class="container">
        <div class="row pt-3">
            <div class="col-md-4">
             ...
            </div>
         </div>
    </div>
</footer>


footer{
  position: absolute;
  width: 100%;
  bottom: 0;
}

Ele funciona bem quando a página não possui scroll, porém quando possui scroll ele não fica no final do scroll, ele fica no final da primeira página, exemplo:

inserir a descrição da imagem aqui

Essa é minha estrutura angular:

<div>
  <app-cabecalho></app-cabecalho>
</div>

<router-outlet (activate)="onActivate($event)"></router-outlet>

<app-rodape></app-rodape>

O app-rodape é o footer e no router-outlet é mostrado o formulário da imagem.

O componente de formulário possui a seguinte estrutura:

<div class="container">

    <div class="row justify-content-md-center">
        <div class="col col-lg-8">
            <div class="container">

                <div class="row">
                    <div class="col-md-12">
                        <p class="divisor is-3"><span>preencha o formulário abaixo</span></p>
                    </div>
                </div>

Se eu retirar a propriedade bottom: 0 o footer é posicionado no final do documento, porém nas outras telas onde não possui scroll ele não permanece no final da tela.

Neste projeto está sendo usado o bootstrap.

2
  • 2
    Já tentou substituir position: absolute; por position: fixed; para ver se te atende?
    – hugocsl
    Commented 18/03/2019 às 14:23
  • Sim, porém eu não quero que o footer seja fixo, eu espero que ele apareça apenas no final do scroll Commented 18/03/2019 às 14:26

3 Respostas 3

3

Como o Bootstrap tem classes flex, basta vc colocar o container do formulário com flex-direction column, depois vc colocar o formulário com flex-grow:1, e o footer com margin-top:auto. https://getbootstrap.com/docs/4.0/utilities/flex/

inserir a descrição da imagem aqui

Segue o código da imagem acima:

.row.grow {
  flex-grow: 1;
}
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<html class="h-100">
<body class="h-100">

  <div class="container h-100">
    <div class="row justify-content-md-center h-100">
      <div class="col col-lg-8 d-flex flex-column ">

        <div class="row grow">
          <div class="col-md-12">
            <p class="divisor is-3"><span>preencha o formulário abaixo</span></p>
            <form>
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                  placeholder="Enter email">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-check">
                <input type="checkbox" class="form-check-input" id="exampleCheck1">
                <label class="form-check-label" for="exampleCheck1">Check me out</label>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi illum ullam, dolorem, nesciunt ut, laudantium aperiam soluta magnam aliquid ad similique facilis temporibus! Tempore commodi in amet nobis maxime repellat dolores tempora ad porro dolorum impedit adipisci dignissimos ex facilis hic, reiciendis ea. Unde iure nam quo fugit cupiditate qui quia ratione inventore suscipit impedit odio quam dicta perspiciatis ducimus minima deleniti, eum accusantium doloribus, vel autem hic fugiat ad quasi. Ab, repudiandae natus dolore dignissimos iure esse perspiciatis facere optio blanditiis nulla ea saepe, et ut modi aliquid voluptates, eveniet reprehenderit enim? Quas quod culpa vel ab error earum dicta voluptas similique! Consectetur unde sequi itaque. Harum, quisquam id soluta corporis accusantium aut odio facilis consequatur rem quasi minus provident optio, ab consectetur ipsam nemo commodi neque sed temporibus totam at voluptates. Ex, consequuntur in. Laboriosam, ducimus dolores mollitia hic expedita animi ea dolore aliquam officia id blanditiis enim sunt quidem distinctio harum esse? Omnis totam itaque nobis deserunt ex, blanditiis dignissimos quidem maxime, incidunt voluptatum odio quos veritatis excepturi voluptatem. Alias, maxime sunt? Nihil atque earum commodi voluptatum error similique esse mollitia fuga eum? Voluptate perferendis unde quos facilis explicabo non molestiae repudiandae inventore, vel corporis minima rem suscipit, ipsam, hic adipisci cupiditate laudantium iusto ea quae? Quidem expedita illum libero hic earum amet aperiam doloribus non corporis animi quia fugit sequi nostrum saepe voluptatum ut laboriosam pariatur consectetur nobis ea fuga praesentium, laborum facere. Placeat voluptatum id veniam reprehenderit ratione, expedita, nemo dolor eum enim exercitationem praesentium similique facilis quo aspernatur debitis perferendis eaque unde, tempora dolores! Repellat velit iure suscipit quod provident minus animi, est aut necessitatibus dolore accusamus blanditiis quibusdam dolorem autem, in nam, ea natus eligendi quas? Id explicabo placeat soluta laudantium. Quidem, quasi molestiae id ipsam quis vero nulla eveniet amet inventore necessitatibus hic animi, corporis rerum optio eius voluptates sapiente quas itaque exercitationem et repudiandae? Molestias reprehenderit eos, quaerat autem distinctio at quae perferendis nam excepturi quis accusantium amet? Voluptatibus rem porro minus ipsam quam iure! Repellendus eum cupiditate unde, quisquam ipsa nesciunt fugit veniam numquam excepturi eaque, ducimus minus, illum corrupti aliquid voluptates! Doloribus, architecto enim! Optio molestias sed quo, nostrum nam ipsa velit ducimus accusamus, numquam eius mollitia doloremque ipsam tenetur vero veritatis asperiores? Accusamus voluptate, laborum aut delectus pariatur nobis officia, adipisci, debitis id consectetur asperiores totam. Autem.
            </p>
          </div>
        </div>

        <div class="row mt-auto">
          <footer class="col bg-dark">
            Footer
          </footer>
        </div>

      </div>
    </div>
  </div>

1

Você poderia adotar uma outra estrutura para seu projeto, segue uma sugestão utilizando as funcionalidades do display: flex;.

https://codepen.io/mathues/pen/gEKZaL.

Na sugestão eu separei a estrutura em duas partes: conteúdo normal (que sempre estará alinhado ao topo, nesse caso o cabeçalho e conteúdo) e o conteúdo de footer (que sempre estará em baixo, até nas páginas de pouco conteúdo)

.general-container
    .top-container
        Cabeçalho
        Conteúdo
    Footer

Para conhecer mais o funcionamento, vale a pena a consultar, até para auxiliar na construção de suas estruturas https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

3
  • 1
    Era exatamente o que eu precisava, e o melhor, funcionou sem quebrar o resto do meu layout Commented 18/03/2019 às 14:45
  • Ótimo, qualquer coisa... :) fica com Deus, abraços! Commented 18/03/2019 às 14:48
  • Só faltou trazer o código pra resposta... Haha
    – LipESprY
    Commented 18/03/2019 às 16:07
1
**Tenta isso aqui ó:** 

   <footer class="page-footer font-small footer-fundo-cinza">
    <div class="container">
        <div class="row pt-3">
            <div class="col-md-4">
             ...
            </div>
         </div>
    </div>
</footer>


footer{
  position: relative; /* ou fixed */
  width: 100%;
  bottom: 0;
}
3
  • Não funciona quando não possui scroll, ele ta sendo posicionado depois do ultimo elemento, se o ultimo elemento não ocupar a tela inteira ele fica no meio da tela Commented 18/03/2019 às 14:38
  • 1
    Com Angular seu exemplo não funciona, pois footer é um componente, ele fica solto no Html e não dentro de uma div, funcionaria se o footer ficasse junto com o formulário na mesma página, o que não acontece.
    – LeAndrade
    Commented 18/03/2019 às 14:54
  • verdade, acredito que a solução do Matheus seja a melhor. codepen.io/mathues/pen/gEKZaL Commented 18/03/2019 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .