row-eq-heightを使用したブートストラップの等しい列の高さは、私のページでは機能しません。

私はページを作成していて、左側のオレンジのdivは常に正しいdivと同じ高さにします。左側のdivはオレンジ色のもので、リンク付きのナビゲーションです。リンクをクリックすると、div内の.pdfファイルのプレビューが表示されます。このプレビューは、pdfが表示された後、常に左側のナビゲーションよりも高くなります。だから私はリンクをクリックすると、オレンジ色のdivが高さを変えたいと思う。row-eq-heightを使用したブートストラップの等しい列の高さは、私のページでは機能しません。

私は.row-eq-heightを試してみました：Same height column bootstrap 3 row responsive Bootstrap equal column heights using row-eq-height

しかし、のdivのは、この後、ブートストラップ・順不同であるので、それは私のために動作しませんでした： http://getbootstrap.com.vn/examples/equal-height-columns/

と、このポスト。

See my code

たぶん、あなたは私を助けることができます。ありがとうございました！

出典

2016-11-18 Workcollar

あなただけのオレンジ色の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>

それは便利だと思います。

出典

2016-11-18 13:55:13

row-eq-heightを使用したブートストラップの等しい列の高さは、私のページでは機能しません。

答えて

関連する問題