Javascript 让两个div的高度相同#2.

我早些时候提出了这个主题，并提出了一个解决方案，但由于某些原因，它不起作用，我希望找到进一步的帮助

我想让两个div具有相同的高度（因此，当一个div的高度变大时，另一个div也应该具有相同的高度）

这是我的HTML：

<div class="aProductHeader">
    <div class="omschrijving">
        <h3>omschrijving</h3>
    </div>
</div>
<div class="aProduct">
    <div class="omschrijving">
        <span class="entry inner">
            Toddler bestek blauw
        </span>
    </div>
</div>

这就是向我提出的解决方案，我把它放在：

<script>

var one = document.getElementsByClassName(".aProductHeader .omschrijving"),
    two = document.getElementsByClassName(".aProduct .omschrijving");

for (i = 0; i < one.length; i++)
{
  if (one[i].offsetHeight > two[i].offsetHeight)
  {
    two[i].style.height = one[i].offsetHeight+"px";
  }else{
    one[i].style.height = two[i].offsetHeight+"px";
  }
}

</script>

var one=document.getElementsByClassName（“.aProductHeader.omschrijving”），
二=document.getElementsByClassName（“.approduct.omschrijving”）；
对于（i=0；i<1.length；i++）
{
如果（一[i].越位>两[i].越位）
{
两个[i].style.height=一个[i].offsetHeight+“px”；
}否则{
一[i].style.height=2[i].offsetHeight+“px”；
}
}

然而，我仍然得到的结果是：

---

关于如何做到这一点有什么想法吗？

无需编写Javascript/jQuery，您可以通过CSS实现这一点

它将是灵活的，并保持两个div高度相同

以下是代码：

HTML:

享受

你可以试试这个。。。 实际上，页眉有边距，所以将h3的CSS写为

h3 {
margin: 0;
}

如果以上功能正常，请尝试以下结构

<div>
<div class="aProductHeader">
    <div class="omschrijving">
        <h3>omschrijving</h3>
    </div>
</div>
<div class="aProduct">
    <div class="omschrijving">
        <span class="entry inner">
            Toddler bestek blauw
        </span>
    </div>
</div>
</div>

工作示例 你想做的是什么

我尝试使用

display:table

&

display:table单元格

CSS

#kasticketProducts{
    overflow:hidden;
    width:250px; /* for testing only */
    display: table;
}
.aProductHeader{
    display: table-cell; 
    background: #cac;
}

.aProduct{
    background: #cec;
    display: table-cell;     
}

查看此项了解更多信息。
.a产品{背景色：#FFFFFF；
.aProduct{background-color: #FFFFFF;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
position: relative;} .aProductHeader{border-top: 1px solid #CA542B;
float: left;
min-height: 65px;
padding-bottom: 4px;
padding-top: 4px;
position: relative;
text-shadow: 1px 1px 1px #000000;
width: 70px;
z-index: 2;}.wrap{border-radius: 0 0 0 5px;
bottom: 0;
left: 0;
margin: 0;
padding-right: 1px;
position: absolute;
top: 0;
width: 70px;
z-index: 1;} 

Wtrite your html
  <div class="wrapper" style="position:realtive;border:1px solid red;"> 
    <div class="wrap"></div>
    <div calss="aProductHeader">xxxxx</div><div class="aProduct">xxx</div>
  </div>

左边框：1px实心#e6；
右边框：1px实心#e6；
位置：相对；}.aProductHeader{边框顶部：1px实心#CA542B；
浮动：左；
最小高度：65px；
垫底：4px；
垫面：4px；
位置：相对位置；
文本阴影：1px 1px 1px#000000；
宽度：70px；
z-index:2；}.wrap{边界半径：05px；
底部：0；
左：0；
保证金：0；
右侧填充：1px；
位置：绝对位置；
排名：0；
宽度：70px；
z-索引：1；}
编写你的html
xxxxxxxx
为什么不将两者放在一个类中？并且使它们都是相对的和高度100%？你可以只使用
CSS
来做到这一点尝试使用
display:table尝试了这两种解决方案，但在我应用它们时，它们都不起作用：s@2339870通过我的演示，你可以看到它是有效的。提供更多相关的代码，我会看看。做一个JSFiddle。这到底是什么？看起来你只是把随机的
CSS
加载到一起，直到它工作为止。（我不知道这是否有效，因为我还没有尝试过，可能会做一个演示）。但我可以告诉你，你根本不知道自己在做什么<代码>位置：绝对
，
浮动：左侧和
左边距：160px这毫无意义，如果你不知道自己在做什么，请不要提交答案。看这个Fiddle（），我已经在我的一个项目中实现了这个技术。什么小提琴？如果你用了也没关系。这是一个糟糕的解决方案，一半的
CSS
不需要在那里。只是看看，是的，别用这个。不需要绝对定位。请看这个-这是一个更好的解决方案。还有其他方法，但我不建议使用你的。
<div>
<div class="aProductHeader">
    <div class="omschrijving">
        <h3>omschrijving</h3>
    </div>
</div>
<div class="aProduct">
    <div class="omschrijving">
        <span class="entry inner">
            Toddler bestek blauw
        </span>
    </div>
</div>
</div>

.aProductHeader .omschrijving {
    background: #cac;
    min-height: 30px;
}
.aProductHeader {
    float: left;
}
.aProduct {
    overflow: hidden;
}
.aProduct .omschrijving {
    background: #cec;
    min-height: 30px;
}
h3 {
    margin: 0;
}

#kasticketProducts{
    overflow:hidden;
    width:250px; /* for testing only */
    display: table;
}
.aProductHeader{
    display: table-cell; 
    background: #cac;
}

.aProduct{
    background: #cec;
    display: table-cell;     
}

.aProduct{background-color: #FFFFFF;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
position: relative;} .aProductHeader{border-top: 1px solid #CA542B;
float: left;
min-height: 65px;
padding-bottom: 4px;
padding-top: 4px;
position: relative;
text-shadow: 1px 1px 1px #000000;
width: 70px;
z-index: 2;}.wrap{border-radius: 0 0 0 5px;
bottom: 0;
left: 0;
margin: 0;
padding-right: 1px;
position: absolute;
top: 0;
width: 70px;
z-index: 1;} 

Wtrite your html
  <div class="wrapper" style="position:realtive;border:1px solid red;"> 
    <div class="wrap"></div>
    <div calss="aProductHeader">xxxxx</div><div class="aProduct">xxx</div>
  </div>