Por que a altura não funciona 100% para expandir as divs para a altura da tela?

No HTML, o usuário pode criar um ou mais contêineres com a ajuda de “" ou "”Elementos. Além disso, o CSS permite que seu usuário modifique a largura e a altura do contêiner de acordo com a necessidade deles. No entanto, a altura: 100% não funciona porque depende do elemento pai. Para fazer isso, primeiro defina a altura do elemento pai e depois defina a altura da div.

Este artigo explicará a altura: 100% para expandir os divs para a altura da tela cheia.

Por que não altura: 100% funciona para expandir as divs para a altura da tela?

Se os usuários desejam utilizar a regra de estilo “Altura: 100%”Para fazer um contêiner de div toda a altura total da tela, ele simplesmente não funciona, pois a porcentagem (%) é uma unidade relativa, o que significa que a altura final dependerá da altura do elemento pai.

Para usar um número percentual de altura, a altura dos pais também deve ser determinada. A única opção é o elemento pai/raiz “”, Que permite uma altura em porcentagem para expandir os divs para a tela inteira.

Como definir a altura: 100% para expandir as divs para a tela inteira?

Pôr "Altura: 100%”Trabalha para expandir as divs para a altura da tela, experimente as instruções declaradas.

Etapa 1: Crie um contêiner "div"

Inicialmente, crie um contêiner de div com a ajuda do “”Elemento e insira um atributo de classe para identificar o contêiner em particular com a ajuda do nome da classe. Em seguida, incorpore algum texto entre a tag:

Linuxhint Ltd UK

Pode -se observar que o contêiner Div foi criado com sucesso:

Etapa 2: Defina “Altura: 100%

Para expandir a div para a altura da tela, acesse a página HTML e o corpo diretamente pelo seu nome “html", e "corpo”. Além disso, acesse o contêiner Div usando o nome da classe com seletor de pontos como “.altura toda”:

HTML, corpo, .altura toda
Altura: 100%;
Min-altura: 100% !importante;

Aqui:

• ““altura”Propriedade define a altura do elemento acessado. Nesse caso, a altura é definida como “100%““.
• Então, defina o “altura da minia" como "100%”E aplique a regra importante nesta propriedade.
• O "!importante”A regra é utilizada para definir mais importância para uma propriedade ou um valor do que seu valor normal.

Etapa 3: estilo o contêiner "div"

Utilizou o nome e seletor da classe como “.altura toda”Para acessar o contêiner Div e aplicar as propriedades CSS abaixo:

.altura toda
Largura: 500px;
Antecedentes: RGB (154, 208, 240);
Alinhamento de texto: centro;
Negrito;
estilo de fonte: itálico;

De acordo com o snippet de código fornecido:

• ““largura”É usado para especificar a largura do elemento.
• ““fundo”Determina a cor da parte traseira do elemento.
• ““alinhamento de texto”A propriedade é utilizada para definir o alinhamento do texto.
• ““Fonte”É usado para especificar a fonte específica do texto.
• ““estilo de fonte”Determina o estilo do texto. Para fazer isso, o valor desta propriedade é definido como “itálico”.

Saída

Isso se trata de definir a altura: 100% para trabalhar para aprimorar as divs na tela inteira.

Conclusão

Para usar um número percentual de altura, a altura dos pais também deve ser determinada. A única exceção é o elemento raiz “”, Que permite uma altura percentual para expandir os divs para a tela inteira. Para fazer isso, acesse os elementos HTML, corpo e div e defina o “altura" como "100%" e "altura da minia" também "100%”. Este tutorial explicou sobre a altura: 100% funciona para expandir a div para a tela inteira.