8

Eu preciso fixar a tag footer no final da página html, mas quando o conteúdo exceder a página a tag footer deve acompanhar o conteúdo e não ficar fixa.

Veja o código CSS é o código HTML que estou usando para isso.

    header {
        min-height: 55px; /* original era 255px mudei para caber no snippet */
        background-color: blue;
    }
    article {
        padding-bottom: 60px; 
        width: 900px; 
        margin: 0 auto;
    }
    footer {
        position: absolute; 
        bottom: 0px; 
        width: 100%; 
        height: 60px; 
        background-color: green;
    }
<header></header>

<article>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>    
</article>

<footer></footer>
</body>
</html>

O problema é que a tag footer com a propriedade position com o valor fixed deixa o rodapé fixo.

Quando mudo a propriedade position para absolute a tag footer fica flutuando e não acompanha o conteúdo.

0

4 Respostas 4

10

Para browsers recentes você pode adicionar isto ao seu CSS:

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 60px; /* altura do seu footer */
}

Segundo o criador da solução, functiona com: IE8+, Chrome / Safari, Firefox e Opera.

A maior vantagem desta solução sobre as outras é que você não precisa criar wrappers em volta do seu conteúdo. Ela utiliza o próprio body como wrapper.

Exemplo: Com muito conteúdo - Sem muito conteúdo

(O mesmo código foi utilizado para os dois exemplos, só o conteúdo que muda.)

0
5

Da para fazer usando flex no body.

Primeiro vc precisa definir o body com display: flex, depois coloca a ordem como column, para que a "orientação" do grid fique na vertical (mais ou menos como o comportamento padrão das divs). Depois no main que vai receber o conteúdo vc coloca flex-grow: 1; e coloca position:sticky na nav para ela ficar fixa no topo. Dessa forma o main vai sempre ocupar todo o espaço disponível, "empurrando" o footer sempre pro final da página independente da quantidade de conteúdo.

inserir a descrição da imagem aqui

Veja o código usado para ter o resultado da imagem acima:

Exipa também como "Página toda" para ver melhor o resultado!

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	flex-direction: column;
	background-color: #ddd;
}
nav, 
footer {
	width: 100%;
	min-height: 50px;
	background-color: #f00;
	text-align: center;
	color: #ddd;
}
nav {
	position: sticky;
	top: 0;
}
main {
	width: 100%;
	background-color: turquoise;
	flex-grow: 1;
}
<nav>NAV</nav>
<main>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur voluptates reprehenderit magni molestias iure unde id minima voluptatem laudantium ipsum. Nam reprehenderit iusto consectetur ipsum natus doloremque laudantium illum quod delectus perferendis! Quam explicabo laudantium suscipit reprehenderit harum quo nostrum porro fugit natus. Eius sequi odit sunt, aut eveniet similique dicta mollitia reprehenderit incidunt, molestiae quod amet esse facere vero perspiciatis dignissimos voluptatum eligendi laborum dolorum asperiores inventore, ipsum est. Obcaecati dolores perspiciatis dignissimos. Consequuntur soluta quaerat, asperiores sed earum non impedit. Tempora dicta dolorum quas id asperiores laboriosam delectus velit perferendis veniam blanditiis ea exercitationem ullam, ab consequuntur incidunt ipsa est voluptate suscipit cumque non ipsum praesentium minima aliquam. Tempore ratione dolore aut saepe sint. Eos vel facilis minima nostruoloremque reprehenderit nisi sunt inventore maxime quisquam quaerat, totam perspiciatis. Quidem in sint debitis perspiciatis labore, eaque nam quis doloremque blanditiis ipsum architecto temporibus sunt tempore voluptates? Voluptatem, dolorum unde ut facilis quasi eligendi officia earum in. Nemo impedit pariatur itaque soluta non minus. Minima vel maiores aliquid officiis accusamus optio excepturi praesentium in doloremque, similique necessitatibus! Iure asperiores necess nemo ipsa laborum velit optio 
</main>
<footer>FOOTER</footer>

OBS: O Flex funciona do IE10 pra cima https://caniuse.com/#search=flex aténde

-2

Uma solução simples e responsiva seria assim.

footer{
position: relative;
background-color: red;
width:100%;
height:48px;
left:0;
bottom:0;
}
<header></header>

<article>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p> 
</article>

<footer></footer>
</body>
</html>

2
  • 1
    Se houver pouco conteúdo na página, o rodapé não ficará fixado na parte de baixo: jsfiddle.net/b8gze2ta
    – Woss
    Commented 15/05/2019 às 14:23
  • Acrescente no css left: 0; bottom: 0; Assim: footer{ position: absolute; background-color: red; width:100%; height:48px; left: 0; bottom: 0; } Commented 16/05/2019 às 17:46
-2

Para que o Caso tenha pouco conteúdo na pagina não se desloque para acompanhar o conteúdo use {left: 0; bottom: 0;}

footer{
position: relative;
background-color: red;
width:100%;
height:48px;
}
<header></header>

<article>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>
  <p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p><p>Conteúdo</p>    
</article>

<footer></footer>
</body>
</html>

2
  • Seu código não está legal, basta vc executar ai e fazer um scroll que vc vai ver que o Footer fica no meio da página e o conteúdo continua após ele Commented 16/05/2019 às 18:31
  • Foi porque havia me esquecido de ajustar o position. Quando o conteúdo for grande não use o left: ou bottom. Quando o Conteúdo for curto ou pouco use-os assim left:0; bottom:0 positon deve ser relative Commented 16/05/2019 às 18:41

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 .