1

Tenho uma div simples:

<div class="quadrant">
  <h1>X</h1>
</div>

//CSS
.quadrant {
  background-color: #E7E7E7;
  margin: auto;
  height: 40%;
  width: 20%;
}

Quando eu tenho algum elemento dentro dessa div, como no caso acima (um H1 com um X) ela aparece normalmente

inserir a descrição da imagem aqui

Mas quando eu tiro o X (Que será o padrão do que eu estou fazendo) Ela simplesmente some.

Eu gostaria que ao carregar a página, ela aparecesse mesmo que não tivesse conteúdo nenhum, pois o conteúdo dela será adicionado depois pelo usuário.

1 Resposta 1

2

Não aparece porque ela provavelmente está num contêiner sem uma altura declarada no CSS. Desta forma o height ficam sem referência, já que seria a porcentagem da altura de um elemento pai. Se o elemento pai não possui um height declarado, logo não tem como calcular a porcentagem de 0.

Se essa div tiver como pai o body, por exemplo, e você der uma altura a ele, irá aparecer mesmo vazia.

body{
   height: 100vh;
}

.quadrant {
  background-color: #E7E7E7;
  margin: auto;
  height: 40%;
  width: 20%;
}
<div class="quadrant">
</div>

O que você pode fazer, se não puder definir uma altura para o contêiner da div, é declarar uma altura mínima em pixels. Por exemplo:

min-height: 100px;
4
  • Muito obrigado Sam. Ela está dentro de uma .row que por sua vez está dentro de um .container do Bootstrap.
    – Naldson
    Commented 7/12/2018 às 15:09
  • Então, nem a classe .row nem a .container possuem alturas declaradas. Com isso os 40% de altura da div ficam sem ter com que se basear.
    – Sam
    Commented 7/12/2018 às 15:16
  • Há alguma maneira de fazer com que a div apareça normalmente sem eu alterar o resultado da row? Exemplo, não mexer no posicionamento ou tamanho que eu tenho dela atualmente.
    – Naldson
    Commented 7/12/2018 às 15:20
  • Coloque um min-height em pixels, um tamanho mínimo que a div pode ter. Ex. min-height: 100px;
    – Sam
    Commented 7/12/2018 às 15:22

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 .