Bootstrap vh-100 on body growing child elements vertically

Question

As I change the pages width in Chrome dev tools, the page also grows vertically. It seems that the viewport height that bootstrap assumes I have is growing larger than it is.

Relevant Code:

<!DOCTYPE html>
<html class="vh-100">
  <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <title>Reef Chat</title>
    <style>
      * { border: 1px black solid;}
      body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
      
      #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;}
    </style>
  </head>
  <body class="vh-100">
    <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>
...

vee · Accepted Answer · 2022-04-05T02:06:50.520

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>

See it in action on jsfiddle.

Option 2.

Use overflow: hidden; on your <body> tag.

See it on jsfiddle.

Bootstrap vh-100 on body growing child elements vertically

1 Answers1

Option 1.

Option 2.