Bootstrap: Make height of div 100% despite navbar (in order to center text)-CodePudding

I'm using Bootstrap 5. I'm trying to get the text in the middle of the page vertically centered. In order to do that, I needed to get the container of the div to take up 100% of the page. I tried using h-100 to do that, but due to the navbar taking up some height, it caused an overflow. I just want the div with the text in it to take up the remaining vertical height, or somehow center the text without needing to do 100% height.

I'm not using any user-defined CSS except for some color & font customizations.

<!doctype html>
<html lang="en" >

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="./css/overrides.css" rel="stylesheet">
    <link href="./css/colors.css" rel="stylesheet">
    <link rel="icon" href="./images/favicon.png">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body  style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">
    <nav >
        <div >
            <a  href="#"><img src="./images/logo_desktop.png" width="200"></a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>
            <div  id="navbarNav">
                <ul >
                    <li >
                        <a  aria-current="page" href="#">Home</a>
                    </li>
                    <li >
                        <a  href="#">Features</a>
                    </li>
                    <li >
                        <a  href="#">Pricing</a>
                    </li>
                    <li >
                        <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div >
        <div >
            <div >
                <h1 >IF YOU CAN THINK IT,<br />WE CAN MAKE IT.</h1>
            </div>
        </div>
    </div>
</body>

</html>

CodePudding user response：

Use fixed-top instead of sticky-top. The difference is between being in the flow of the document or out of it.

Edit: on mobile you'd still want it to be sticky probably. So use a media query to distinguish the position.

<!doctype html>
<html lang="en" >

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="./css/overrides.css" rel="stylesheet">
  <link href="./css/colors.css" rel="stylesheet">
  <link rel="icon" href="./images/favicon.png">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">


</head>

<body  style="background:url('./images/test_bg.jpeg'); background-repeat: no-repeat; background-size:fit;">
  <nav >
    <div >
      <a  href="#"><img src="./images/logo_desktop.png" width="200"></a>
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>
      <div  id="navbarNav">
        <ul >
          <li >
            <a  aria-current="page" href="#">Home</a>
          </li>
          <li >
            <a  href="#">Features</a>
          </li>
          <li >
            <a  href="#">Pricing</a>
          </li>
          <li >
            <a  href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div >
    <div >
      <div >
        <h1 >IF YOU CAN THINK IT,<br />WE CAN MAKE IT.</h1>
      </div>
    </div>
  </div>
</body>

</html>