In HTML, the user can create one or more containers with the help of “<div>” or “<span>” elements. Furthermore, CSS permits its user to modify the container’s width and height according to their need. However, the height:100% doesn’t work because it depends on the parent element. To do so, first set the parent element height, then set the div height.
This write-up will explain the height:100% for expanding the divs to the full-screen height.
Why Doesn’t height: 100% Work to Expand divs to the Screen Height?
If users want to utilize the style rule “height:100%” to make a div container the full height of the screen, it simply does not work since the percentage (%) is a relative unit, meaning the final height will depend on the height of the parent element.
To use a percentage number for height, the parent’s height must also be determined. The only option is the parent/root element “<html>”, which permits a height in percentage to expand the divs to the full screen.
How to Set height: 100% for Expanding divs to the Full Screen?
To set “height:100%” works for expanding the divs to the screen height, try out the stated instructions.
Step 1: Create a “div” Container
Initially, create a div container with the help of the “<div>” element and insert a class attribute to identify the particular container with the help of the class name. Then, embed some text in between the <div> tag:
It can be seen that the div container has been created successfully:
Step 2: Set “height: 100%
To expand the div to the screen height, access the HTML page and body directly by its name “html”, and “body”. Also, access the div container by using the class name with dot selector as “.full-height”:
height: 100%;
min-height: 100% !important;
}
Here:
- “height” property sets the height of the accessed element. In this case, the height is set as “100%“.
- Then, set the “min-height” as “100%” and apply the important rule on this property.
- The “!important” rule is utilized for setting more importance to a property or a value than its normal value.
Step 3: Style the “div” Container
Utilized the class name and selector as “.full-height” for accessing the div container and apply the below-stated CSS properties:
width: 500px;
background: rgb(154, 208, 240);
text-align: center;
font: bold;
font-style: italic;
}
According to the given code snippet:
- “width” is used for specifying the element’s width.
- “background” determines the color of the element’s backside.
- “text-align” property is utilized for setting the alignment of the text.
- “font” is used for specifying the particular font of the text.
- “font-style” determines the style of the text. To do so, the value of this property is set as “italic”.
Output
That’s all about setting the height: 100% for working to enhance divs to the full screen.
Conclusion
To use a percentage number for height, the parent’s height must also be determined. The only exception is the root element “<html>”, which permits a percentage height to expand the divs to the full screen. To do so, access the html, body, and div elements and set the “height” as “100%” and “min-height” also “100%”. This tutorial has explained about the height:100% works to expand the div to the full screen.
