CSS div full screen - ProCoder Cafe

CSS div fullscreen

In web design, sometimes we want to make a <div> An element fills the entire screen, making it appear fullscreen. This effect can be easily achieved with some simple CSS techniques. This article will explain in detail how to make a <div> element fill the entire screen, and provide some sample code to help you better understand.

Method 1: Using the `height` and `width` Attributes to Set Fullscreen

The simplest method is to set the <div> element’s height (height) and width (width) to 100%, making it fill the entire screen. Here is a simple sample code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Full Screen Div</title> 
<style> 
body, html { 
margin: 0; 
padding: 0; 
height: 100%; 
} 
.fullscreen { 
height: 100vh; /* Uses viewport height as height value */ 
width: 100vw; /* Uses viewport width as width value */ 
background-color: #f0f0f0; 
} 
</style> 
</head> 
<body> 
<div class="fullscreen"> 
This is a fullscreen div. 
</div> 
</body> 
</html>

In the code above, we first set the height of the <body> and <html> elements to 100% to ensure that the entire page fills the screen. Next, we define a <div> element with the class name fullscreen and set its height and width to 100vh and 100vw, respectively, so that it fills the entire screen. Finally, we add a background color to this <div> element to better illustrate the effect.

Copy and paste the above code into an HTML file and open it in a browser; you will see a <div> element that fills the entire screen.

Method 2: Using the `position: fixed` Attribute to Fix the Element

Another method is to use the position: fixed attribute, which fixes the element’s position relative to the browser window. Here is a sample code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Full Screen Div</title> 
<style> 
.fullscreen { 
position: fixed; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
background-color: #f0f0f0; 
} 
</style> 
</head> 
<body> 
<div class="fullscreen"> 
This is a fullscreen div with fixed position. 
</div> 
</body> 
</html>

In the code above, we define a <div> element with the class name fullscreen and set its position property to fixed. Then, we pin it to the four edges of the browser window using top: 0; left: 0; right: 0; bottom: 0; so that it fills the entire screen. Similarly, we add a background color to this <div> element to better illustrate the effect.

You can also copy and paste the above code into an HTML file and open it in a browser; you will see a <div> element with the position: fixed property that fills the entire screen.

Method 3: Using CSS Grid Layout to Achieve a Full-Screen Effect

Another common method is to use CSS Grid Layout. This is done by setting a <div> element as a Grid container, so that it fills the entire web page. Here is a sample code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Full Screen Div</title> 
<style> 
body { 
margin: 0; 
padding: 0; 
display: grid; 
place-items: center; 
height: 100vh; 
} 
.fullscreen { 
background-color: #f0f0f0; 
} 
</style> 
</head> 
<body> 
<div class="fullscreen"> 
This is a fullscreen div with CSS Grid layout.

</div>

</body>

</html>

In the code above, we set the <body> element to display: grid, making it a grid container. We then use place-items: center; to center the grid items (here, the <div> element). Finally, we set the <div> element’s height to 100vh, making it fill the entire screen. Similarly, we add a background color to the <div> element.

You can also copy and paste the above code into an HTML file and open it in a browser; you’ll see a <div> element that fills the entire screen using CSS Grid layout.

Using the above three methods, we can easily create a <div> element that fills the entire screen. Readers can choose one of the methods to achieve a full-screen effect based on their actual needs.