Styling HTML and Body Selector to Height: 100%; Vs Using 100Vh

Styling HTML and BODY selector to height: 100%; vs using 100vh

height: 100vh = 100% of the viewport height

height: 100% = 100% of the parent's element height

That is why you need to add height: 100% on html and body, as they don't have a size by default

Something you have to know : if you use % for vertical margin or padding, % will be calculated on the width of the parent element, not the height.

Tip : try using vh and vw units for font size :) I like this one (not supported in some browsers I know) : font-size: calc(.5vh + .5vw); (for example)

See a nice page here for CSS units : http://css-tricks.com/the-lengths-of-css/

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

CSS `height: calc(100vh);` Vs `height: 100vh;`

There's no difference, since any time the expression calc(100vh) is calculated, it always ends up being 100vh.

Bootstrap vh-100 on body growing child elements vertically

Refer from this answer

height: 100vh = 100% of the viewport height
height: 100% = 100% of the parent's element height

If I have window height 593 pixels and if I use height: 100vh; on <body> the body itself will be height 593 pixels included borders.

But If i use height: 100%; on both <html> and <body> the html element will be height 593 pixels but body will be height 591 pixels. With this height: 100%; on both elements will not overflow your body tag.

Option 1.

Remove class="vh-100" on both html and body and use CSS height: 100%; instead.

* {
    border: 1px black solid;
}

html {
    height: 100%;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    height: 100%;
}

#form {
    display: inline-flex;
    backdrop-filter: blur(10px);
}

#input {
    border-radius: 0;
}

#input:focus {
    outline: none;
}

#form>button {
    background: #333;
    border: none;
    outline: none;
    color: #fff;
    border-radius: 0;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="container-fluid h-100">
        <ul id="messages"></ul>
        <form id="form" action="" class="position-fixed bottom-0 start-50 translate-middle-x w-100">
            <input id="input" autocomplete="off" class="form-control" />
            <button class="btn btn-primary">Send</button>
        </form>
    </div>
</body>

Difference between Width:100% and width:100vw?

vw and vh stand for viewport width and viewport height respectively.

The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.

If you set the style body { margin: 0 }, 100vw should behave the same as 100% (for an element that is a child to body).

Additional notes

Using vw as unit for everything in your website, including font sizes and heights, will make it so that the site is always displayed proportionally to the device's screen width regardless of it's resolution. This makes it super easy to ensure your website is displayed exactly the same in both workstation and mobile.

You can set font-size: 1vw (or whatever size suits your project) in your body CSS and everything specified in rem units will automatically scale according to the device screen, so it's easy to port existing projects and even frameworks (such as Bootstrap that already uses rem as unit for everything) to this concept.

Div not filling out even at min-height:100%;

When you use height: 100% for sidebar, it will be 100% of its parent component. The parent of sidebar is body so it will take the 100% height of body.

The parent of body is html, but you haven't added height for it.

First method

Add the height for html tag.

html {
height: 100%
}

Second method

Use height: 100vh for the body or sidebar to make the height of sidebar equal to the height of viewport i.e. full height of browser. In my opinion it will be better if you add it to body.

100vh means 100% of viewport height.

CSS3 100vh not constant in mobile browser

Unfortunately this is intentional…

This is a well know issue (at least in safari mobile), which is intentional, as it prevents other problems. Benjamin Poulain replied to a webkit bug:

This is completely intentional. It took quite a bit of work on our part to achieve this effect. :)
The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).
It is hard to show you the “looks like shit” part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.
Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.
From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

Nicolas Hoizey has researched this quite a bit: https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

No fix planned

At this point, there is not much you can do except refrain from using viewport height on mobile devices. Chrome changed to this as well in 2016:

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
https://developers.google.com/web/updates/2016/12/url-bar-resizing

Set 100% height child section

Change min-height: calc(100vh - 8rem - 7.2rem) to height: calc(100vh - 8rem - 7.2rem)

There are also a couple other options like adding min-height: inherit to your .intro class or adding something like height: 0.001px to your .main class.

Taken from here: Child inside parent with min-height: 100% not inheriting height

Styling HTML and Body Selector to Height: 100%; Vs Using 100Vh