HTML Screen availHeight Property

HTMLWeb DevelopmentFront End Technology

The HTML Screen availHeight property returns the available height of the user’s screen that means it excludes interface features of the browser.

Syntax

Following is the syntax −

screen.availHeight

Example

Let us see an example of HTML Screen availHeight Property:

Live Demo

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #FBAB7E;
      background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
      text-align: center;
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   .show {
      font-size: 1.2rem;
      margin: 1rem auto;
      font-weight: bold;
      font-family: sans-serif;
   }
</style>
<body>
<h1>HTML screen availHeight Property</h1>
<button class="btn" onclick="get()">Show availHeight Value</button>
<div class="show"></div>
<script>
   function get() {
      document.querySelector(".show").innerHTML = "Available Height is " + screen.availHeight + " px";
   }
</script>
</body>
</html>

Output

Click on “Show availHeight value” button to display the value of availHeight property -

raja
Published on 24-Sep-2019 11:31:56
Advertisements