我想让两列高度相等。这意味着菜单列的高度应与主列相同，而主列的高度会根据浏览器窗口大小变化。图片下面有一个Typed.js脚本，在主div中显示特定文本。我该如何实现？我在网上搜索了解决方案，但我找到的内容却把我的页面布局搞乱。

/*html
{
    background-image: url("../images/background_start.jpg");
}*/

body {
  overflow-x: hidden;
}

:root {
  --bs-body-font-family: var(--bs-font-times-new-roman);
}

h1,
.h1 {
  font-weight: 700;
}

#bg {
  background-image: url("../images/background_start.jpg");
}

#container {
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  width: 100%;
  max-width: 960px;
}

header {
  max-width: 960px;
  max-height: 85px;
  background-color: #808080;
}

#logo {
  width: 130px;
  height: 85px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

#image_gora {
  box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
  -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
  -moz-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
  -o-box-shadow: 0px 0px 15px 5px rgba(255, 0, 0, 1);
}

.row>* {
  padding-right: 0;
  padding-left: 0;
}

#napis {
  width: 830px;
  height: 85px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

#napis_gora {
  color: #830808;
  font-size: 35px;
  text-shadow: 4px 4px 6px rgba(255, 255, 255, 1);
  text-transform: uppercase;
}

.clear {
  clear: both;
}

nav {
  width: 130px;
  height: 600px;
  background-color: #C0C0C0;
  float: left;
}

menu {
  list-style-type: none;
  text-align: center;
  padding: 0;
  position: sticky;
  top: 0;
}

nav menu li a {
  text-decoration: none;
  color: black;
  border-bottom: solid;
  font-size: 25px;
  line-height: 50px;
  font-weight: bold;
}

nav menu li a:hover,
nav menu li a#active {
  font-style: italic;
  font-weight: normal;
  border-bottom: none;
  color: white;
  background-color: #0080C0;
  border-radius: 30px;
  padding: 10px;
  cursor: pointer;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  padding-left: 0;
}

@media screen and (min-width: 992px) {

  .navbar .container-fluid,
  .navbar-expand-lg .navbar-collapse,
  .navbar-expand-lg .navbar-nav {
    flex-direction: column;
    align-items: center;
  }
}

.navbar {
  --bs-navbar-padding-y: 0;
  display: inline;
}

.nav-link {
  display: inline;
  padding: 0;
  font-size: 25px;
  font-weight: bold;
  color: black;
  text-decoration: none;
  background: none;
  border-bottom: solid;
  transition: none;
}

@media screen and (max-width: 990px) {
  nav {
    width: 80px;
  }

  .nav-link {
    font-size: 12px;
  }
}

.navbar-nav {
  display: inline;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

main {
  position: relative;
  width: 830px;
  min-height: 600px;
  background-color: #E0E0E0;
  float: left;
}

#start_chrystus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 808px;
  max-height: 569px;
}

#start_chrystus:hover {
  opacity: 0;
  transition: opacity 1s;
}

footer {
  max-width: 960px;
  max-height: 85px;
  background-color: #808080;
}

#stopka_lewa {
  width: 130px;
  float: left;
}

#html,
#css,
#js {
  width: 43px;
  height: 85px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}

#html:hover,
#css:hover,
#js:hover {
  opacity: 0.5;
}

#html_rozmiar {
  width: 50px;
  height: 50px;
  cursor: pointer;
}

#css_rozmiar {
  width: 59px;
  height: 50px;
  cursor: pointer;
}

#js_rozmiar {
  width: 90px;
  height: 50px;
  cursor: pointer;
}

#zegar {
  width: 250px;
  height: 85px;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

#stopka_prawa {
  width: 580px;
  height: 85px;
  float: left;
  display: flex;
  justify-content: right;
  align-items: center;
  font-size: 20px;
}

#stopka_napis {
  text-decoration: none;
  font-style: italic;
  color: #404040;
  margin-right: 20px;
  cursor: pointer;
}

#stopka_napis:hover {
  color: #008020;
  font-weight: bold;
}

@media screen and (max-width: 576px) {
  #stopka_prawa {
    width: 0;
  }

  #stopka_napis {
    font-size: 0;
  }
}

@media screen and (max-width: 680px) {
  #stopka_napis {
    font-size: 0;
  }
}

@media screen and (max-width: 768px) {
  #stopka_prawa {
    width: 193px;
  }
}

@media screen and (max-width: 992px) {
  #stopka_prawa {
    width: 290px;
  }
}

button {
  margin: 0 auto;
}

<!DOCTYPE html>
<html lang="pl-PL">

<head>
  <title>Zakopane Siostry Zmartwychwstanki</title>
  <meta name="description" content="Zakopane Siostry Zakonne" />
  <meta name="keywords" content="adoracja, apostolstwo, Bóg, cisza, cr, galeria, Giewont, góry, Jezus, kaplica, klasztor, kontakt, kościół, modlitwa, msza, nocleg, noclegi, odpoczynek, pobyt, pokoje, refleksja, rekolekcje, siostry, spotkania, spotkanie, Tatry, wędrówka, wspólnota, wspólnoty, wypoczynek, zakon, zakonnice, Zakopane, zakopanecr, zdjęcia, zdjęcie, zmartwychwstanki, dom modlitwy, dom rekolekcyjny, dom wypoczynkowy, dom zakonny, domy modlitwy, domy rekolekcyjne, domy wypoczynkowe, domy zakonne, Jezus Chrystus, odpoczynek duchowy, organizacja kościelna, organizacje kościelne, Pan Jezus, Regina mundi, rozmowa z Bogiem, siostry zakonne, siostry zmartwychwstanki, spotkanie z Bogiem, ulica Za Strugiem, ulica Za Strugiem 27, wspólnota zakonna, wspólnoty zakonne, Za Strugiem, Za Strugiem 27, zgromadzenia zakonne, zgromadzenie zakonne" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.css" media="screen" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="css/index.css" media="screen" />
  <link rel="shortcut icon" href="images/favicon.ico" type="image/ico" />
  <style>




  </style>
  <!--typedjs START-->
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const typed = new Typed('#typed', {
        strings: ["\<span style='font-size:20px;'>\<strong>\<center>\</br>\</br>„Regina mundi” – klasztor sióstr zmartwychwstanek,\</br>z pięknym widokiem na Giewont, w pobliżu Ścieżki pod Reglami,\</br>i u wejścia do malowniczej Doliny Strążyskiej.\</br>Od 27 grudnia 1955 roku mieszka w nim Pan Jezus Zmartwychwstały,\</br>który pragnie być nawiedzany i adorowany.\</br>\</br>^1000Po Panu Jezusie,\</br>czekają na Państwa w progach domu siostry zmartwychwstanki,\</br>które założyła matka z córką – swoisty ewenement – w XIX wieku,\</br>kiedy Polski nie było na mapach świata,\</br>ale była w sercach Polek i Polaków,\</br>którzy nigdy nie zwątpili w jej zmartwychwstanie,\</br>i moralne odrodzenie społeczeństwa.\</br>Tymi ideałami żyją również współczesne pokolenia zmartwychwstanek,\</br>o czym będą się mogli Państwo przekonać, odwiedzając nasz klasztor.\</br>\</br>^1000ZAPRASZAMY\</center>\</strong>\</span>"],
        typeSpeed: 60, // typing speed
        startDelay: 500, // time before typing starts
        backSpeed: 0, // backspacing speed
        backDelay: 15000, // time before backspacing
        loop: true,
        contentType: 'html', // or text
        // defaults to false for infinite loop
        loopCount: false,
        onComplete: function(self) {
          shift();
        }
      });
    });

    function shift() {
      document.querySelector(".head-wrap").classList.add("shift-text");
      terminalHeight();
    }

    function terminalHeight() {
      var termHeight = document.querySelector(".terminal-height");
      var value = termHeight.textContent;
      value = parseInt(value);
      setTimeout(function() {
        if (value > 10) {
          value = value - 1;
          this.txtValue = value.toString();
          termHeight.textContent = this.txtValue;
          terminalHeight();
        } else {
          clearTimeout();
        }
      }, 10);
    }
  </script>
  <!--typedjs END-->
  <script type="text/javascript">
    function odliczanie() {
      var dzisiaj = new Date();
      var dzien = dzisiaj.getDate();
      if (dzien < 10) {
        dzien = "0" + dzien;
      }
      var miesiac = dzisiaj.getMonth() + 1;
      if (miesiac < 10) {
        miesiac = "0" + miesiac;
      }
      var rok = dzisiaj.getFullYear();
      var godzina = dzisiaj.getHours();
      if (godzina < 10) {
        godzina = "0" + godzina;
      }
      var minuta = dzisiaj.getMinutes();
      if (minuta < 10) {
        minuta = "0" + minuta;
      }
      var sekunda = dzisiaj.getSeconds();
      if (sekunda < 10) {
        sekunda = "0" + sekunda;
      }

      document.getElementById("zegar").innerHTML = godzina + ":" + minuta + ":" + sekunda + " | " + dzien + "/" + miesiac + "/" + rok;

      setTimeout("odliczanie()", 1000);
    }
  </script>
</head>

<body onload="odliczanie();" id="bg">

  <div id="container" class="container">
    <header>
      <div id="logo">
        <img src="images/logo.png" id="image_gora" alt="logo">
      </div>
      <div class="row">
        <div id="napis">
          <h1 id="napis_gora" class="text-break">Siostry Zmartwychwstanki - Zakopane</h1>
        </div>
      </div>
      <div class="clear"></div>
    </header>
    <nav class="navbar navbar-expand-lg sticky-top">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <menu class="navbar-nav">
            <li class="nav-item"><a href="zakopane-siostry-zmartwychwstanki" id="active" class="nav-link">Start</a></li>
            <li class="nav-item"><a href="gory" class="nav-link">Góry</a></li>
            <li class="nav-item"><a href="galeria" class="nav-link">Galeria</a></li>
            <li class="nav-item"><a href="kronika" class="nav-link">Kronika</a></li>
            <li class="nav-item"><a href="kontakt" class="nav-link">Kontakt</a></li>
            <li class="nav-item"><a href="bonus" class="nav-link">Bonus</a></li>
            <li class="nav-item"><a href="zagadka" class="nav-link">Zagadka</a></li>
            <li class="nav-item"><a href="frustrator" class="nav-link">Frustr8tor</a></li>
            <li class="nav-item"><a href="szubienica" class="nav-link">Szubienica</a></li>
            <li class="nav-item"><a href="sw-pawel" class="nav-link">Św. Paweł</a></li>
          </menu>
        </div>
      </div>
    </nav>
    <div class="row">
      <main>
        <article>
          <div id="start_chrystus" class="col-12">
            <img src="images/start_chrystus.png" class="img-fluid" alt="chrystus">
          </div>
          <!--typedjs START-->
          <div class="header">
            <div class="head-wrap">
              <div class="text-editor-wrap">
                <div class="title-bar"><span class="title"><span class="terminal-height"></span></span></div>
                <div class="text-body">
                  <span id="typed"></span>
                </div>
              </div>
            </div>
          </div>
          <!--typedjs END-->
        </article>
      </main>
    </div>
    <div class="clear"></div>
    <footer>
      <div id="stopka_lewa">
        <div id="html">
          <a href="https://validator.w3.org/#validate_by_input" target="_blank"><img src="images/belka_dol_html5.png" id="html_rozmiar" alt="html5"></a>
        </div>
        <div id="css">
          <a href="https://jigsaw.w3.org/css-validator/#validate_by_input" target="_blank"><img src="images/belka_dol_css3.png" id="css_rozmiar" alt="css3"></a>
        </div>
        <div id="js">
          <a href="https://www.site24x7.com/tools/javascript-validator.html" target="_blank"><img src="images/belka_dol_javascript.png" id="js_rozmiar" alt="js"></a>
        </div>
      </div>
      <div id="zegar"></div>
      <div id="stopka_prawa">
        <a href="zagadka.php" id="stopka_napis">Created by CSfC & Team</a>
      </div>
      <div class="clear"></div>
    </footer>
  </div>
  <script src="js/typed.umd.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

解决方案

你不应该用固定高度来强制让两列达到相同的高度。真正的问题在于布局把旧的浮动与Bootstrap / flex布局混用，因此实现等高的效果比实际需要的要困难。

在你的代码中，nav和 main都是浮动（float: left），并且main还具有固定宽度，因此Bootstrap的 row/column系统并没有真正用在这两个并排区域。这就是菜单无法随着内容区域自然延展的原因。

一个更简洁的修复方法是把nav和 main放在同一Bootstrap行中，并移除浮动：

<div class="row g-0 align-items-stretch">
  <nav class="col-lg-2">
    ...
  </nav>

  <main class="col-lg-10">
    ...
  </main>
</div>

然后把CSS大致改成如下：

nav,
main {
  float: none;
  width: auto;
  min-height: 600px;
}

.row.equal-cols {
  display: flex;
  align-items: stretch;
}

nav {
  background-color: #C0C0C0;
}

main {
  background-color: #E0E0E0;
  position: relative;
}

更简单地说：

<div class="row g-0 d-flex align-items-stretch">
  <nav class="col-lg-2">
    ...
  </nav>
  <main class="col-lg-10">
    ...
  </main>
</div>