HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>CSS height Viewport Example</title>

  <style>

    * {

      box-sizing: border-box;

    }



    body {

      font-family: system-ui, sans-serif;

      margin: 0;

      line-height: 1.6;

    }



    .hero {

      height: 100vh;

      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

      background: linear-gradient(135deg, #2563eb, #7c3aed);

      color: #fff;

      text-align: center;

      padding: 1.5rem;

    }



    .hero h1 {

      margin: 0 0 0.5rem;

    }



    .hero p {

      margin: 0;

      opacity: 0.9;

    }

  </style>

</head>

<body>

  <section class="hero">

    <h1>Full Viewport Hero</h1>

    <p>This section uses height: 100vh.</p>

  </section>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS height Property - viewport units