0

I am working on a page and want the left orange div to always be at the same height as the right div. The left div is the orange one, this is the navigation with links. When you click on a link, right in the div a preview of a .pdf-file will appea. This preview is always higher than the left navigation after the pdf appears. So I want that the orange div to change height when i click on the link.

I tried the .row-eq-height: http://getbootstrap.com.vn/examples/equal-height-columns/

and this posts:Same height column bootstrap 3 row responsive Bootstrap equal column heights using row-eq-height

But it did not work for me because the the div's are out of the bootstrap-order after this.

See my code

Maybe you can help me. Thank you!

Community
  • 1
  • 1
Workcollar
  • 1
  • 1

1 Answers1

0

You just need to get height of orange div and just apply it on another .right div using .height() function.

JS Code :

 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>

Hope it's useful.

Hidayt Rahman
  • 2,490
  • 26
  • 32