CSS – por que a altura percentual não funciona?

Por que um valor percentual para a height não funciona, mas um valor percentual para width não funciona?

Por exemplo :

 
 #working{ width:80%; height:140px; background:orange; } #not-working{ width:80%; height:30%; background:green; } 

A largura de #working acaba sendo 80% da viewport, mas a altura de #not-working acaba sendo 0.

A altura de um elemento de bloco é padronizada para a altura do conteúdo do bloco. Então, dado algo como isto:

 

Where is pancakes house?

#inner crescerá para ser alto o suficiente para conter o parágrafo e #outer crescerá para ser alto o suficiente para conter #inner .

Quando você especifica a altura ou a largura como uma porcentagem, essa é uma porcentagem em relação ao pai do elemento. No caso de largura, todos os elementos de bloco são, a menos que especificado de outra forma, tão largos quanto seus pais até o momento em ; Portanto, a largura de um elemento de bloco é independente de seu conteúdo e de width: 50% produz um número bem definido de pixels.

No entanto, a altura de um elemento de bloco depende do seu conteúdo, a menos que você especifique uma altura específica. Portanto, há feedback entre o pai e o filho em que a altura está em causa e a height: 50% não produz um valor bem definido, a menos que você quebre o ciclo de feedback dando ao elemento pai uma altura específica.

Um valor de porcentagem em uma propriedade de height tem uma pequena complicação e as propriedades de width e height se comportam de maneira diferente uma da outra. Deixe-me levá-lo a um passeio pelas especificações.

propriedade de height :

Vamos dar uma olhada nas especificações do CSS Snapshot 2010 sobre height :

A porcentagem é calculada com relação à altura do bloco que contém a checkbox gerada. Se a altura do bloco que o contém não for especificada explicitamente (ou seja, depende da altura do conteúdo), e este elemento não estiver posicionado de forma absoluta, o valor será computado para ‘auto’. Uma altura percentual no elemento raiz é relativa ao bloco inicial contendo . Nota: Para elementos absolutamente posicionados cujo bloco de contenção é baseado em um elemento de nível de bloco, a porcentagem é calculada com relação à altura da checkbox de preenchimento desse elemento.

OK, vamos desmontar passo a passo:

A porcentagem é calculada com relação à altura do bloco que contém a checkbox gerada.

O que é um bloco contendo ? É um pouco complicado, mas para um elemento normal na posição static padrão, é:

a checkbox ancestral de contêiner de bloco mais próxima

ou em inglês, sua checkbox pai. (Vale a pena saber o que seria para posições fixed e absolute também, mas estou ignorando isso para manter essa resposta curta.)

Então pegue esses dois exemplos:

 

Eu acho que você só precisa dar a ele um contêiner pai … mesmo que a altura desse contêiner seja definida em porcentagem. Isto parece funcionar bem: JSFiddle

 html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; } .container { width: 100%; height: 50%; } 

Você precisa dar um contêiner com uma altura. width usa a viewport como a largura padrão

Outra opção é adicionar estilo ao div

 
//to be scrolled

E isso significa que um elemento está posicionado em relação ao ancestral posicionado mais próximo.

Sem conteúdo, a altura não tem valor para calcular a porcentagem de. A largura, no entanto, terá a porcentagem do DOM, se nenhum pai for especificado. (Usando o seu exemplo) Colocando o segundo div dentro do primeiro div, teria renderizado um resultado … exemplo abaixo …

 

O segundo div seria 30% da altura do primeiro div.

Intereting Posts