0

Tou a tentar fazer uma brincadeira com css e html5 deste tipo.

inserir a descrição da imagem aqui

Só que esta a dar varios problemas porque

  1. A div (content)principar nao está a ocupar toda a altura e largura da pagina.
  2. O Posicionamento da div (central) aparenta estar no meio mas quando passa para ecrãs maiores isso não acontece . Codigo

* {
  margin: 0px;
  padding: 0px;
}
body {
  background-color: #FF0000;
}
#centro {
  position: relative;
  margin-top: 20%;
  margin-bottom: 15%;
  width: 100%;
  height: 200px;
  margin-right: 0;
  margin-left: 0;
  background: rgba(255,255,255,0.3);
  box-sizing: border-box;
}
section p {
  padding: 10px;
  font-family: Comic Sans MS;
  font-size: 40px;
  width: 100%;
  height: 80%;
  box-sizing: border-box;
  text-align: center;
}
footer {
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
}
#content {
  width: 100%;
  height: 100%;
  border: 2px solid #8AC007;
  box-sizing: border-box;
}
<div id="content">
  <section id="centro">
    <p>
      Teste
    </p>
  </section>
  <footer>
    Teste
  </footer>
</div>

Obrigado.

2
  • Cole seu código aqui também, para facilitar a análise do pessoal.
    – user28595
    Commented 25/09/2015 às 15:46
  • Já meti obrigado pela dica
    – MANIAMAX
    Commented 25/09/2015 às 15:51

1 Resposta 1

1

Amigo, para conseguir centralizar a div (central) na pagina, você terá que aplicar um position: absolute na mesma, então necessariamente a div (content) não pode ter um position: static, neste caso terá de trabalhar com relative, absolute ou fixed

Para fazer a div (central) ocupar toda a pagina, então você deve fazer o html e o body também ocuparem toda a pagina, afinal o height: 100%é relativo ao tamanho do elemento pai.

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#content {
  background-color: gainsboro;
  width: 100%;
  height: 100%;
}

#central {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  height: 120px;
  margin: auto;
  background-color: white;
  box-shadow: 0px 0px 10px black;
}

#central p {
  margin: 0px;
  height: 120px;
  line-height: 120px;
  text-align: center;
  font-weight: bold;
  font-size: 36px;
}

footer {
  position: absolute;
  text-align: center;
  width: 100%;  
  bottom: 0px;
}
<div id="content">
  <div id="central">
    <p>Texto</p>
  </div>
  <footer>
    Texto
  </footer>
</div>

O truque para centralizar a div(central) é ancorar ela no topo e no final, para isto você vai precisar do top: 0px e bottom: 0px, mas ao fazer isto e deixar o height: auto, a div(central) vai ocupar todo o espaço da div(content), um efeito semelhante a um height: 100%, então se especificamos um height e colocamos margin: auto, as margens irão crescer até a posição do top: 0px e o bottom: 0px;

3
  • deu certo mas o problema e que o footer fica em cima não no lugar dele em baixo
    – MANIAMAX
    Commented 25/09/2015 às 16:14
  • Tenta colocar o footer com position: absolute e bottom: 0px Commented 25/09/2015 às 16:40
  • O exemplo que coloquei acima, o footer está na parte de baixo. Commented 25/09/2015 às 16:41

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 .