Web Page Height Fits Screen (WPHFS)

To make the height of a web page match the height of the screen, you can use CSS to set the height of the HTML and body elements to 100%, ensuring that they take up the full height of the viewport. Additionally, you may want to set the margin and padding of these elements to zero to eliminate unwanted whitespace. Here's a basic example:

<!DOCTYPE html> 
<html  lang= "en" > 
<head> 
  <meta  charset= "UTF-8" > 
  <meta  name= "viewport"  content= "width=device-width, initial-scale=1.0" > 
  < style > 
    html ,  body {
       height :  100 % ;
       margin :  0 ;
       padding :  0 ;
    }
    
    /* Additional styles for your content here */

  </style> 
  <title> Your Web Page </title> 
</head> 
<body> 
  <!-- Your content here --> 
</body> 
</html>

In this example, the html and body elements are set to height: 100%; to take up the full height of the viewport. Margin and padding are set to zero to remove the default whitespace.

Keep in mind that the content inside the body element will affect the overall height. If you have a fixed header or footer, you may need to adjust the height of the content area accordingly.

If there are certain elements or sections that you want to control the height of, you can apply similar styles to those elements, ensuring that they also have 100% height. For example:

/* Adjust the height of a specific section */ 
#main-section {
   height :  100 % ;
}

Keep in mind that making a web page take up the height of the viewport may not be appropriate for all designs, especially on devices with small screens. Always consider responsive design principles to ensure your web page looks good on a variety of devices and screen sizes.

A quick, inelegant but functional standalone solution with inline CSS and no jQuery requirement. AFAIK it works from IE9 too.

<body  style= "overflow:hidden; margin:0" > 
    <form  id= "form1"  runat= "server" > 
        <div  id= "main"  style= "background-color:red" > 
            <div  id= "content " >

            </div> 
            <div  id= "footer" >

            </div> 
        </div> 
    </form> 
    <script language= "javascript" > 
        function autoResizeDiv()
        {
            document .getElementById( 'main' ).style.height =  window .innerHeight + 'px' ;
        }
        window .onresize = autoResizeDiv;
        autoResizeDiv();
    </script> 
</body>

Web Page Height Fits Screen (WPHFS)

Post a Comment

نموذج الاتصال