Tamanho do corpo / Qual código é necessário?

Olá a todos.
Adicionei raio de borda a este código e fiz a parte inferior como eu queria.
Mas não consigo consertar a parte superior.

Quais códigos devo adicionar para que a parte superior fique igual à inferior?

como: top-height-size: -30%; ? mas isso não funciona

body:before {
  display: inline-block;
  border-radius: 15px;
  width: 1125px;
  min-height: 100%;
  height: inherit;
  background-color: #fff;
  content: " ";
  position: fixed;
  left: 50%;
  right: 0;
  transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
}

Desculpe, mas não parece claro o que você precisa fazer. Você poderia adicionar mais detalhes sobre:

  1. Qual parte específica da página você está tentando alterar.
  2. Qual alteração você está tentando fazer.


A parte de cima, quero fazer assim
https://pvpfarm.com
Quero adicionar raio de borda como a parte de baixo (embaixo)
Tudo que quero é ter um espaço em cima entre ela e o cabeçalho.

Meu inglês é ruim, desculpe. Obrigado pela ajuda

Está tudo bem, seu inglês é bom, mas código pode ser complicado de falar! Obrigado por adicionar mais detalhes. Acho que o problema faz sentido.

Às vezes, você pode usar margin-top para adicionar mais espaço acima.

Mas não funciona quando você rola!

Isso acontece porque há position: fixed na parte body:before, então ele sempre ficará no mesmo lugar na tela. Vamos mudar para position: absolute em vez disso. ‘Absolute’ nos permite dizer o quão longe das bordas queremos que as bordas fiquem. Precisamos dizer para usar body para as bordas, então precisamos adicionar este código:

body {
  position: relative;
}

(Se você quiser aprender mais sobre position, fixed e absolute aqui aqui está um post com exemplos)

Ok, vamos deletar min-height: 100% de body:before, porque queremos que seja menor que 100%. Agora podemos controlar onde o topo e a base estão! Vamos adicionar top: 70px e bottom: 30px. (O topo precisa ser grande o suficiente para passar pelo cabeçalho do topo da tela).

Parece como você queria? Me diga se faz sentido. :slight_smile:

4 curtidas

Você é incrível!
Obrigado por me ensinar em vez de me dar códigos prontos. :heart:
@bryce

3 curtidas

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.