How to make a < div > always full screen?

To ensure a <div> element remains full-screen, we can achieve this by setting CSS styles. The primary method involves using the width and height properties to control the dimensions of the <div> element and the position property to ensure it is correctly positioned within the viewport.

Here is a specific implementation example:

css
.fullscreen-div {
    position: fixed; /* or use absolute, depending on specific needs */
    top: 0;
    left: 0;
    width: 100vw; /* 100% of viewport width */
    height: 100vh; /* 100% of viewport height */
    background-color: #f8f9fa; /* background color, can be modified as needed */
    z-index: 1000; /* ensures the div is on top */
    overflow: auto; /* allows scrolling if content exceeds screen */
}

Then, use it in HTML as follows:

html
<div class="fullscreen-div">
    <!-- Add any content here -->
    Welcome to the full-screen `<div>` element!
</div>

This CSS and HTML code ensures the <div> always occupies the entire viewport area of the browser window. The position: fixed; property keeps the <div> fixed at a specific position within the viewport, preventing it from moving with the scrolling of other page elements.

Additionally, by setting width to 100vw (100% of the viewport width) and height to 100vh (100% of the viewport height), the <div> will fully cover the viewport regardless of size changes.

Finally, z-index: 1000; ensures this <div> appears above other page elements, especially when stacked elements are present.

One practical application is creating a full-screen welcome interface or introduction page, which users encounter first upon visiting the website, thereby enhancing the user experience.