🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【CSS】Como Definir a Altura de um Elemento para 100%｜Uso de h-100 e h-50

Este guia explica como definir a altura de um elemento para 100% usando as classes CSS h-100 e h-50. Ao fazer isso, a altura do elemento será ajustada para corresponder à altura do contêiner principal.

🔹 Exemplo de Código

<div class="container">
  <div class="h-100">Este elemento terá altura de 100%.</div>
  <div class="h-50">Este elemento terá altura de 50%.</div>
</div>

<style>
.container {
  height: 300px;
}
.h-100 {
  height: 100%;
}
.h-50 {
  height: 50%;
}
</style>

💻 Código Completo Funcional (Copie e Cole para Funcionar)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Elementos com altura de 100% e 50%</title>
  <style>
    .container {
      height: 300px;
      border: 2px dashed #000;
    }
    .h-100 {
      height: 100%;
      background-color: #90EE90;
      padding: 1rem;
    }
    .h-50 {
      height: 50%;
      background-color: #ADD8E6;
      padding: 1rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="h-100">Este elemento terá altura de 100%.</div>
    <div class="h-50">Este elemento terá altura de 50%.</div>
  </div>
</body>
</html>

🧩 Aplicação e Uso

height: 100%; é uma das formas mais fundamentais de ajustar a altura de um elemento para corresponder à altura do seu contêiner principal. Isso é particularmente útil quando você deseja que um elemento ocupe toda a altura do contêiner principal.

📱 Design Responsivo

h-100 é muito eficaz em designs responsivos. Ao usar h-100, você pode ajustar a altura dos elementos para que se adaptem a diferentes tamanhos de tela, como em dispositivos móveis.

Ao usar esta classe, você garante que a altura do elemento se ajuste ao contêiner principal, tornando o layout vertical mais consistente.

Copiado!

Modelos Relacionados