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.