Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?
<!DOCTYPE html>
<html>
<head>
<style>
.wideBody .side-column {
float: right;
order: 2;
width: 300px;
}
.wideBody .side-column footer {
position: sticky;
position: -webkit-sticky;
top: 0;
}
.wideBody .main-column {
align-self: flex-start;
float: left;
width: 500px;
border: 2px solid #4CAF50;
}
.resultados {
border: 2px solid #4CAF50;
margin-bottom:25px;
position:relative;
}
footer {
border: 2px solid #4CAF50;
}
</style>
</head>
<body class="wideBody">
<main>
<div>
<div class="main-column">
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
coluna principal<br />
</div>
<aside class="side-column">
coluna auxiliar
<div class="resultados">
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
1 -> 2<br />
</div>
<footer>
rodape fixo
</footer>
</aside>
</div>
</main>
</body>
</html>Resolvido
Consegui fazer o que eu queria, obrigado, esse código é apenas um exemplo, um teste, por isso não estava me preocupando muito com as tags de quebra de linha, mas obrigado amigo, segue o código funcionando:
<!DOCTYPE html>
<html>
<head>
<style>
.wideBody .main-content {
display: flex;
justify-content: space-between
}
.wideBody .side-column {
float: right;
order: 2;
width: 300px;
}
.wideBody .side-column footer {
position: sticky;
position: -webkit-sticky;
top: 0;
}
.wideBody .main-column {
align-self: flex-start;
float: left;
width: 500px;
border: 2px solid #4CAF50;
height: 5000px
}
.resultados {
border: 2px solid #4CAF50;
margin-bottom: 25px;
position: relative;
height: 120px
}
footer {
border: 2px solid #4CAF50;
height:100px;
}
</style>
</head>
<body class="wideBody">
<div class="main-content">
<div class="main-column">
coluna principal<br />
</div>
<aside class="side-column">
coluna auxiliar
<div class="resultados">
Resultados
</div>
<footer>
rodape fixo
</footer>
</aside>
</div>
</body>
</html>eu não sei porque mas eu tentei e não está funcionando
>
6 horas atrás, PedroHRLeite disse:
Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página
Hã?!!!! Rodapé fixo no topo, mas quando alcança o topo fica no topo? Mas ele já não estaria no topo?
Explica direito isso aí
A propósito para quê tantas tag's break? "<br />" Não seria mais simples usar "margin-bottom"