Uma pergunta comum no design do site é "como você define a altura de um elemento como 100%"?
Isso pode parecer uma resposta fácil. Você simplesmente usa CSS para definir a altura de um elemento como 100%, mas isso nem sempre estica esse elemento para caber em toda a janela do navegador. Vamos descobrir por que isso acontece e o que você pode fazer para alcançar esse estilo visual.
Pixels e porcentagens
Quando você define a altura de um elemento usando a propriedade CSS e um valor que usa pixels, esse elemento ocupa muito espaço vertical no navegador. Por exemplo, um parágrafo com um
altura: 100 px;
ocupará 100 pixels de espaço vertical em seu design. Não importa o tamanho da janela do navegador, esse elemento terá 100 pixels de altura. As porcentagens funcionam de maneira diferente dos pixels. De acordo com a especificação W3C, as alturas percentuais são calculadas em relação à altura do contêiner. Então, se você colocar um parágrafo com um altura: 50%;
dentro de um div com uma altura de 100px, o parágrafo terá 50 pixels de altura, o que representa 50% do elemento pai. Se você está projetando uma página da Web e tem uma coluna que gostaria de ocupar toda a altura da janela, a inclinação natural é adicionar uma altura: 100%;
para esse elemento. Afinal, se você definir o largura
para largura: 100%;
o elemento ocupará todo o espaço horizontal da página, altura
deve funcionar da mesma forma, certo? Infelizmente, isso não é o caso. Para entender por que isso acontece, você deve entender como os navegadores interpretam a altura e a largura. Os navegadores da Web calculam a largura total disponível como uma função da largura da janela do navegador é aberta. largura
Se você não definir nenhum valor em seus documentos, o navegador fluirá automaticamente o conteúdo para preencher toda a largura da janela (a largura de 100% é o padrão). O valor da altura é calculado de forma diferente da largura. Na verdade, os navegadores não avaliam a altura, a menos que o conteúdo seja tão longo que fique fora da janela de visualização (exigindo, portanto, barras de rolagem) ou se o web designer define um absoluto para um elemento na página. altura
Caso contrário, o navegador simplesmente deixa o conteúdo fluir dentro da largura da viewport até chegar ao fim. A altura não é realmente calculada em tudo. Os problemas ocorrem quando você define uma altura de porcentagem em um elemento que tenha elementos pai sem heights - em outras palavras, os elementos pai têm um padrão. altura: auto;
Você está, na verdade, pedindo ao navegador para calcular uma altura a partir de um valor indefinido. Como isso seria igual a um valor nulo, o resultado é que o navegador não faz nada. Se você quiser definir uma altura em suas páginas da web para uma porcentagem, você tem que definir a altura de cada elemento pai daquele que você quer a altura definida. Em outras palavras, se você tem uma página como esta: Conteúdo aqui
Você provavelmente quer o div
e o parágrafo tem 100% de altura, mas esse div realmente tem dois elementos pais: e. Para definir a altura do div
a uma altura relativa, você deve definir a altura do corpo
e html
elementos também. Então, você precisaria usar CSS para definir a altura não apenas do div, mas também dos elementos body e HTML. Isso pode ser um desafio, já que você pode ficar sobrecarregado rapidamente com tudo sendo definido para 100% de altura, apenas para obter esse efeito desejado. Agora que você sabe como definir a altura dos seus elementos de página para 100%, pode ser interessante sair e fazer isso em todas as suas páginas, mas há algumas coisas que você deve saber: Para corrigir isso, você pode definir a altura do elemento também. Se você configurá-lo para auto,
barras de rolagem aparecerão se forem necessárias, mas desaparecerão quando não estiverem.Isso corrige a quebra visual, mas adiciona barras de rolagem onde você pode não querer. Outra maneira de enfrentar esse desafio é experimentar as unidades Viewport CSS. Ao usar a unidade de medida de altura da janela de visualização, você pode dimensionar elementos para ocupar uma altura definida da janela de visualização e isso mudará à medida que a janela de visualização mudar! Esta é uma ótima maneira de obter seus visuais de altura de 100% em uma página, mas ainda assim, eles devem ser flexíveis para diferentes dispositivos e tamanhos de tela. Por que as alturas percentuais falham
Algumas coisas a serem observadas ao trabalhar com 100% de altura
Usando unidades Viewport
