Question

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/

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

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

See my code

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

Answer 1

你只需要获得橙色div的高度，然后使用 birthdate: artist['life-span']begin 函数将其应用于另一个.right div。

JS代码：

.height()

 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
}

希望它有用。

Bootstrap equal column heights using row-eq-height dont work with my page

1 个答案: