0

Há um tempo estava procurando como colocar header e footer fixos no topo e no final da página, respectivamente, se ajustando ao conteúdo que ficaria entre dos dois, e consegui com o seguinte código:

CSS:

#wrapper {
    min-height: 100%;
    position: relative;
}
#container {
    background: red;
    padding-bottom: 80px;
    overflow: hidden;
}
#content {
    background: blue;
    width: 1000px;
    margin: 0 auto;
}
header {
    height: 52px;
    background: black;
}
header div {
    width: 1000px;
    background: red;
    height: 52px;
    margin: 0 auto;
}

HTML

<div id="wrapper">
            <div id="container">
                <header>
                    <div></div>
                </header>
                <div id="content"></div><!--content-->
            </div><!--container-->
</div><!--wrapper-->

Gostaria de saber como, usando esse código, posso fixar o header no topo ao rolar a página, mas manter a estrutura do content e do footer.

8
  • O que significa "manter a estrutura do content e do footer"?
    – Largato
    Commented 21/04/2016 às 16:20
  • O content seria oque fica entre o header e o footer, que vai se ajustar independente do tamanho, e mesmo assim o footer ficaria no rodapé fixo, e o header no topo .... Commented 22/04/2016 às 14:10
  • Creio que é o que o @Daniel respondeu então. A única coisa que tem que acrescentar é um padding no content, em cima e embaixo do mesmo tamanho do footer e do header, assim o começo e o fim do content não vão ficar encobertos.
    – Largato
    Commented 22/04/2016 às 14:12
  • Eu acabei de ver a demo no JsFiddle, mas o footer também tá fixo, era só o header, por exemplo, como é no Facebook e Youtube, o header com a barra de busca fica fixo e acompanha a rolagem do site, mas não o footer, o footer fican o final da página, entendeu? Commented 22/04/2016 às 14:15
  • Essas coisas você tem que colocar sempre no corpo da pergunta, pois eu também só entendi pelos comentários aqui embaixo. Procure nas próximas descrever melhor o problema, aí a gente consegue te ajudar melhor e ao mesmo tempo quem for responder não perde tempo com coisa que não te é útil. Mas a solução é simples, ele colocou uma entrada no CSS para o header e outra para o footer. Basta não usar a do footer. Se quiser que o footer fique no pé da página quando esta for menor que a tela, basta um min-height:100% e altura do body e html com 100% também.
    – Largato
    Commented 22/04/2016 às 14:17

1 Resposta 1

2

Uma das soluções seria posicionar o header como position:fixed para que o header tenha as propriedades tope left relativas ao window. E usando as medidas vw (Viewport width) e vh (Viewport height) você pode posicionar facilmente um elemento na viewport (área visível do browser). Abaixo um exemplo (bem resumido) do que você pode fazer para posicionar esses elementos da maneia desejada.

header{
    position: fixed;
    top:0;
    left: 0;
}

footer{
    position: fixed;
    bottom:0;
    left: 0;
}

Segue um exemplo funcionando:

https://jsfiddle.net/kvkw1eex/1/

2
  • O Footer nesse caso também está "encobrindo" o conteúdo com a rolagem, mas no caso era pra ser só o header, como é no facebook e youtube, que a barra de busca acompanha a rolagem, mas o footer fica no final da página. Commented 22/04/2016 às 14:16
  • Nesse caso, você não especifica o position do footer. Deixa ele sem as propriedades, position, top e left. Que ele irá seguir a ordem dos elementos. É que você havia citado no título header e footer fixos por isso coloquei o position:fixed; no footer também. Commented 22/04/2016 às 17:37

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 .