não consigo utilizar position: sticky como eu queria

PedroHRLeite · Janeiro 22, 2021

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>

PedroHRLeite · Janeiro 23, 2021

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>

Entrar

não consigo utilizar position: sticky como eu queria

Pergunta

PedroHRLeite

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

PedroHRLeite

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades