Bootstrap h-100 applied to <html> or <body> tag?

user_2693088 0
Viewed 239

In some cases, the Bootstrap class h-100 is applied to the <html> element, and in some cases to the <body> element, and sometimes to both. For example, in the code Sticky footer with fixed navbar, https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/, the class h-100 is applied to both the <html> and <body> element, for short

<!doctype html>
<html lang="en" class="h-100">
<head>
...
</head>
<body class="d-flex flex-column h-100">
...
</body>
</html>

Are there any logic behind this, any rules to follow, when to address the <html> element, and when to address the <body> element?

bootstrap-4
1 Answers

Overview

In general 100% height is required when the design requires full height.

As an example a typical situation is to position the footer on the bottom, regardless of the screen's height. While developing these design concepts, lacking 100% height shows clear issues when dealing with empty pages, where no content is generating height and as a result, the footer is stacked below the header.

Design concepts that introduce height requirements:

  • fixed footer
  • centered content vertically
  • modal UI backdrop
  • scrolling enhancements
  • …

These concepts usually only affect the CSS of your website and require the functionality to be both on the html and body tag.

Back to question

So the question remains, why only on the <html /> or only the <body />? My idea is it depends on certain JavaScript calculations.

Imagine you require the top position of an element => document object is used
Imagine you require to scroll to a certain position => window object is used

Both functionalities can work separately where document object finds elements in the <body /> and window object finds properties on the <html /> tag.

Not entirely certain it's split this way, but I can see someone adding h-100 class to the html tag to fix a scrolling issue and someone else adding h-100 to the body to fix an offset/position issue. In my opinion it's always better to introduce height 100% for both.

user_11145300
Related