3

Tenho um layout aqui, onde, o background do container é preto transparente, e ele vai até o rodapé da página. mas tem outro problema, aonde tá escrito "Sitemap", é um menu que desliza para cima, e esse container tem que fica atrás desse pedaço, o footer tá usando ´position: relative´. layout do site onde container vai até o rodapé

esse é o código do container:

.container {
    width: 1000px;
    margin: 0 auto;
    margin-bottom: -50px;
}

no código, ´margin-bottom´ negativo foi o jeito que dei de fazer o container ficar atrás do início do footer, mas o cliente olhou pelo monitor dele e parece que não alcançou, acho que é por causa da resolução da tela dele...(maldição!)

ps: o bg transparent é outra classe que insere o fundo transparente no container.

edit: meu footer fica sempre grudado no fundo da página, ou seja, é um sticky footer, então, independente do tamanho do monitor, o * footer* sempre fica no fundo, e isso que deixa mais difícil, porque esse container deve ficar sempre grudado nele também.

4
  • Se possivel, adicione o seu HTML na pergunta. Commented 11/02/2014 às 12:22
  • sério? é que é grande pra caramba!
    – Leandro RR
    Commented 11/02/2014 às 12:25
  • @LeandroRuel coloque todo seu HTML e todo seu CSS em um exemplo feito neste site jsfiddle.net e depois clique em update e pegue o link que será gerado na sua barra de endereços e poste aqui como "Exemplo no JSFiddle" para que possamos te ajudar corretamente Commented 12/02/2014 às 13:45
  • Dá uma olhada nessa resposta de outro post: pt.stackoverflow.com/a/413211/82200 Commented 29/09/2019 às 16:11

2 Respostas 2

2

Nesse caso, coloque o fundo não no conteiner que tem o texto, mas em um conteiner que estaria no fundo dele.

Caso o HTML do seu site seja simples e não tenha nada de especial no cabecalho, nesse conteiner basta por height: 100%. height: 100% é uma das coisas mais difíceis de funcionar em CSS porque tem pega-ratões, mas em alguns casos funciona sim.

Recomendo que leia esse artigo do Maujor sobre Por que height: 100% não funciona?

Resumindo a ideia: para height: 100% funcionar, todos os elementos pais devem ter atributo height definidos, ou os filhos não tem como fazer qual valor é 100%.

Exemplo 1: Div não vai até o final

Exemplo 2: Div VAI até o final

Para os demais exemplo, veja o artigo completo do Maujor. Ele é bem esclarecedor.

1
  • vou tentar fazer isso, cheguei a pensar nisso, inclusive testei primeiro o height:100% no container mas não deu certo, o background nao alcançou o conteudo, nem chegou perto do rodapé
    – Leandro RR
    Commented 11/02/2014 às 12:27
1

@LeandroRuel, fiz um exemplo que pode ser visto clicando AQUI.

HTML:

<body>
  <div class="container">
    <p>Quase nada de conteudo</p>
  </div>
</body>

CSS:

body, html{
  height: 100%;
}

.container{
  background: red;
  width: 500px;
  margin: 0 auto;
  height: 100%;
}

Para que o height: 100% neste caso, o meu elemento pai que no caso é o body tem que estar com o height: 100% também.

Por exemplo, se o body estiver com height de 500px e o container com height: 100%, o height do container vai ser de 500px. Pois ele vale 100% do elemento pai.

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 .