使用 row-eq-height 引导等列高度不适用于我的页面

Question

我正在处理一个页面，并希望左侧橙色 div 始终与右侧 div 处于相同高度。 左边的 div 是橙色的，这是带有链接的导航。当您单击链接时，将出现在 div 中的 .pdf 文件预览。 pdf出现后，此预览始终高于左侧导航。所以我希望橙色 div 在我点击链接时改变高度。

我试过.row-eq-height： http://getbootstrap.com.vn/examples/equal-height-columns/

这个帖子：Same height column bootstrap 3 row responsive Bootstrap equal column heights using row-eq-height

但这对我不起作用，因为在此之后 div 超出了引导顺序。

See my code

也许你可以帮助我。 谢谢！

Answer 1

您只需要获取橙色 div 的高度，然后使用 .height() 函数将其应用于另一个 .right div。

JS 代码：

 var height = $("div#left").height();
    $("div#right").css("height", height);

$("#nav li:has(ul)").children("ul").hide();
$("#nav li:has(ul)").find("div").click(function() {
  var parent = $(this).parent()
  parent.siblings().find("ul.showSubnav").removeClass("showSubnav");
  parent.find("ul:first").toggleClass("showSubnav");
  parent.siblings().find("div.ordnerOffen").removeClass("ordnerOffen");
  parent.find("div:first").toggleClass("ordnerOffen");
});

var height = $("div#left").height();
$("div#right").css("height", height);

/*Haupt-Container-----------------------------------*/

div.container {
  width: 100%;
  font: 12px Verdana, Arial;
  clear: both;
  /*border:1px solid silver;*/
}
/*Rahmen -----------------------------------*/

div#wrapper {
  width: auto;
  height: auto;
  margin-left: 6%;
  margin-right: 6%;
  border: 1px solid silver;
}
/*Header-----------------------------------*/

header {
  padding: 1em;
  color: white;
  clear: left;
  background-image: url(Hintergrundbild.jpg);
  background-repeat: no-repeat;
  text-align: left;
}
/*Top-Level-Navigation-----------------------------------*/

div#top_nav {
  font: bold 10px Verdana, Arial;
  clear: both;
  background-color: white;
  text-align: right;
  color: #FFFFFF;
  padding: 5px;
  padding-left: 0px;
  padding-right: 0px;
}
div#top_nav a {
  text-decoration: none;
  color: white;
}
#navigation_ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
#navigation_li {
  float: left;
}
#navigation_li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
#navigation_li a:hover {
  background-color: #111;
}
.active {
  background-color: #FCC330;
}
/*NavigationLinks-----------------------------------*/

div#left {
  float: left;
  min-width: 35%;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  margin-bottom: 5px;
  background-color: #FF8700;
  /*orange #FF8700;*/
  overflow: auto;
  box-sizing: border-box;
  /* Innenabstände werden nicht zur Breite addiert */
  /* background-image: linear-gradient(90deg, transparent,#FF8700 45%, #FFFFFF 100%);*/
}
/*Überschrift Home-----------------------------------*/

#home {
  font-size: 20px;
  vertical-align: bottom;
  border-bottom: 2px solid #F6F1F1;
  padding-bottom: 6px;
}
/*Linke Navigation -----------------------------------*/

#nav {
  padding-left: 5px;
  padding-top: 10px;
  color: black;
  font: 12px Verdana, Arial;
  clear: both;
}
.ordner,
.ordnerOffen {
  padding: 8px;
  display: block;
  margin-right: -10px;
  margin-top: -5px;
  margin-bottom: -5px;
  margin-left: -20px;
  overflow: hidden;
}
.ordnerOffen {
  cursor: pointer;
  color: white;
  background-color: #333;
}
li:hover .ordner {
  cursor: pointer;
  color: white;
  background-color: #333;
}
a {
  text-decoration: none;
  color: black;
  padding: 5px 5px 5px 15px;
  display: block;
}
ul,
li {
  list-style: none;
}
#nav li {
  /*padding: 2px 2px 2px 15px;*/
  cursor: default;
  margin-right: -10px;
  overflow: hidden;
  /*border-top:1px solid black;*/
}
#nav ul {
  display: none;
  margin-top: 5px;
  background: url(img/dots.png) repeat-y scroll 10px 0px transparent;
}
#nav .showSubnav {
  display: block !important;
}
#nav li.expand {
  background: url(img/folder.png) no-repeat scroll 2px 4px transparent;
  border-bottom: 1px solid #000;
  padding: 5px 5px 5px 16px;
  /*border-top:1px solid black;*/
}
.expanded {
  background: url(img/folder.open.png) no-repeat scroll 0px 5px transparent !important;
  border-bottom: 1px solid #000;
}
#nav li a:hover {
  text-decoration: none;
  color: #F6F1F1;
  border-width: 1px;
  border-style: solid;
  border-left: black;
}
#nav ul a:hover {
  text-decoration: none;
  color: #000000;
  background-color: white;
}
/*Rechte Spalte-----------------------------------*/

div#right {
  margin-left: 280px;
  border-left: 1px solid gray;
  padding: 1em;
  padding-top: 0em;
  overflow: hidden;
}
/*PDF-Anzeige-----------------------------------*/

#pdf {} .pdfobject-container {
  width: 100%;
  max-width: auto;
  height: 600px;
  /*margin: 2em 0;*/
}
.pdfobject {
  border: solid 1px #666;
}
/*#results { padding: 1rem; }*/

.hidden {
  display: none;
}
/*.success { color: #4F8A10; background-color: #DFF2BF; }*/

.fail {
  color: #D8000C;
  background-color: #FFBABA;
}
/*Logo Groß-----------------------------------*/

#logogross {}
/*Footer-----------------------------------*/

div#footer {
  padding: 1em;
  color: white;
  background-color: #333;
  clear: left;
  text-align: left;
}
#right {
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>
  MiniTec Intranet</title>

<!-- Body -->

<body>

  <div class="container">

    <div id="wrapper">

      <!-- Header -->

      <div id="header">
        <header>
          <img src="logo.png" alt="Logo">
        </header>
      </div>

      <!-- Toplevel-Navigation -->

      <div id="top_nav">
        <ul id="navigation_ul">
          <li id="navigation_li"><a class="active" href="#home">Home</a>
          </li>
          <li id="navigation_li"><a href="#Dokumente">Dokumente</a>
          </li>
          <li id="navigation_li"><a href="#zuordnungstabellen">Zuordnungstabellen</a>
          </li>
          <li id="navigation_li"><a href="#vorspann">1. Vorspann</a>
          </li>
          <li id="navigation_li"><a href="#managementsystem">2. Managementsystem</a>
          </li>
          <li id="navigation_li"><a href="#abläufe">3. Abl&aumlufe</a>
          </li>
          <li id="navigation_li"><a href="#anhang">4. Anhang</a>
          </li>
          <li id="navigation_li"><a href="#wiki">Wiki</a>
          </li>
        </ul>
      </div>

      <!-- Linke Navigation -->

      <div id="left">

        <!-- Home -->
        <p></p>

        <div id="home">Home/Dokumente</div>
        <p></p>

        <!-- Linke Navigation -->
        <div id="Navigation_Links">

          <ul id="nav">
            <li class="expand">
              <div class="ordner">&nbsp;&nbsp;&nbsp;&nbsp; &Uumlber das IQB</div>
              <ul>
                <li><a href="PDF/Einbauerklaerung_2006-42-EG_Muster.pdf" class="embed-link">&#xbb; Einbauerklaerung_2006-42-EG_Muster</a>
                </li>
                <li><a href="PDF/a.pdf" class="embed-link"> &#xbb; Einbauerklaerung_2006-42-EG_Muster </a>
                </li>
                <li>Partner/Links</li>
              </ul>
            </li>

            <li class="expand">
              <div class="ordner">&nbsp;&nbsp;&nbsp;&nbsp; Bildungsstandards</div>
              <ul>
                <li>Aufgabenbeispiele</li>
                <li>EMSE</li>
                <li class="expand">
                  <div class="ordner">&nbsp;&nbsp;&nbsp;&nbsp; Downloadserver</div>
                  <ul>
                    <li>Audiofiles</li>
                    <li>Videofiles</li>
                  </ul>
                </li>
              </ul>
            </li>

            <li class="expand">
              <div class="ordner">&nbsp;&nbsp;&nbsp;&nbsp; Arbeitsbereiche</li>
            </div>

          </ul>

          <!-- search -->

          <div id="Suche">
            ###SEARCH###
          </div>

          <!-- Ende Linke Spalte -->
        </div>

        <!-- Rechte Spalte/PDF-Anzeige -->

        <div id="right">

          <!-- Ende Rechte Spalte -->
        </div>

        <!-- Footer -->

        <div id="footer">
          <footer>Footer</footer>
        </div>

      </div>
    </div>

</body>

希望有用。