PedroHRLeite
-
Total de itens
2 -
Registro em
-
Última visita
Sobre PedroHRLeite
PedroHRLeite's Achievements
0
Reputação
-
não consigo utilizar position: sticky como eu queria
pergunta respondeu ao PedroHRLeite de PedroHRLeite em Tutoriais & Dicas - HTML, XHTML, CSS
Resolvido Consegui fazer o que eu queria, segue o código funcionando, talvez alguém possua a mesma dúvida: <!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> -
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>