1

Olá, eu tenho um problema que está perturbando a muito tempo, eu tenho uma pagina na qual há uma div cuja tem vários conteúdos dentro que se modificam de acordo com o desejo do usuário, logo abaixo existe um Rodapé.

Caso eu coloque um position: relative, o rodapé irá adequar sua posição de acordo com o tamanho da página, porém ele não fica "preso" em baixo (sem nenhum espaço até o fim dá page) caso o altura do monitor se altere. Já caso eu coloque um position: absolute o footer irá ficar fixo no fim da página, mas não se adequará ao tamanho da janela. Então não sei como fazer para "mesclar" as duas configurações necessárias.

Meu exemplo está aqui.

Obrigado.

7
  • Vc quer que ele fique preso quando o usuário desce a barra de rolagem? Commented 31/08/2014 às 1:31
  • Ja tentou colocar position: fixed? Commented 31/08/2014 às 1:33
  • Se o que entendi, só usar position:fixed; bottom:0
    – darkziul
    Commented 31/08/2014 às 1:44
  • Talvez eu não tenha me expressado bem, eu não desejo que o rodapé esteja com um position: fixed, e sim com um position: relative ou com um position: absolute, o problema está em suas características primitivas, no caso do position: relative ele irá mudar sua posição (sua localização, não sua posição css) de acordo com o tamanho dos elementos que se localizam antes dele, porém não encontro um jeito de colocar um bottom: 0px semelhante ao que acontece caso eu aplique um position: absolute. Alguém sabe como seria possível fazer isso? Commented 31/08/2014 às 19:09
  • Eu juro que tentei entender mas ainda não consegui claramente. Você quer sua div de rodapé em bottom: 0px quando o conteúdo não é grande suficiente para estourar a página, e deixar sempre abaixo da div "page" quando o conteúdo dessa div estourar o tamanho da página? Seria como a classe "footer" do bootstrap 3? Já viu o exemplo do bootstrap? Commented 5/09/2014 às 20:55

1 Resposta 1

1

Bom, não sei se é a melhor alternativa, mas a solução que encontrei foi essa:

<body>
  <style>
  * {
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  .page {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
  }
  .rodape, .push {
    height: 4em;
  }

  .rodape { 
      background: #3C948B;
  }
  </style>

  <div class="page">
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>
      <p>Your website content here.</p></br>

      <div class="push"></div>
  </div>
  <div class="rodape">
        <p style="vertical-align: middle; position: relative; top: 28px; margin-left: 20px;
         color: rgb(255, 255, 255)" >TechSmart&copy; WebResolution&reg; - 2014</p>
  </div>
</body>

Veja que a função da <div class="push"> é apenas empurrar seu rodapé quando o conteúdo não é grande o suficiente para ter scroll na página.

A partir dessa exemplo você pode ir adaptando conforme suas necessidades.

Se alguém quiser conferir a fonte da resposta, segue o link.

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 .