Bootstrap égal hauteur des colonnes en utilisant row-eq-hauteur ne fonctionne pas avec ma page

Question

Je travaille sur une page et je veux que la div orange gauche soit toujours à la même hauteur que la droite div. La div à gauche est l'orange, c'est la navigation avec des liens. Lorsque vous cliquez sur un lien, un aperçu d'un fichier .pdf apparaît dans le div. Cet aperçu est toujours plus élevé que la navigation de gauche après l'affichage du pdf. Donc je veux que la div orange change de hauteur quand je clique sur le lien.

J'ai essayé le .row-eq-height: http://getbootstrap.com.vn/examples/equal-height-columns/

et ce message: Same height column bootstrap 3 row responsive Bootstrap equal column heights using row-eq-height

Mais cela n'a pas fonctionné pour moi parce que les div sont hors de processus de démarrage en ordre après.

See my code

Peut-être que vous pouvez me aider. Merci!

Answer 1

Vous avez juste besoin d'obtenir la hauteur de div orange et il suffit d'appliquer sur un autre .right div en utilisant .height() fonction.

code 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>

Espoir il est utile.