在使用引导时，如何使用javascript将div设置为其他两个div的高度

我正在使用javascript使图像显示在引导模板中。在全屏显示时，它们都具有

292.5px

，但我想将其中一列的高度设置为其他两列的高度。在寻求帮助时，我发现：

var right=document.getElementById('box').style.height;
var left=document.getElementById('slideshow3').style.height;
if(left>right)
{
    document.getElementById('box').style.height=left;
}
else
{
    document.getElementById('slideshow3').style.height=right;
}

但出于某种原因，它不起作用。我只需要将

#box

高度

更改为

#slideshow4

+

#slideshow5

谢谢

--------------更新------------------

---

请看我的感谢

像这样使用

jquery

，它可能会对您有所帮助

left = $("#left").height();
right = $("#right").height();
if(left<right)
  $("#slideshow3").height(right);
else
  $("#box").height(left);

left=$（“#left”）.height（）；
右=$（“#右”）.height（）；
如果（左我创建了一个演示，因为您没有提供HTML

HTML

请不要使用内联和块级元素

<span id="box">
<div id="cl1" class="c1"> Column 1</div>
<div id="cl2" class="c1"> Column 1</div>
</span>
<span id="slideshow3"> Column 3</span>

CSS

因此，在JSFIDLE中，
box
是一个类，而不是id，所以它是
.box
而不是
#box

如果要将其高度设置为幻灯片放映3和幻灯片放映4的高度之和，请使用：

$('.box').height($('#slideshow3').height() + $('#slideshow4').height());

试试这个功能

//sets the height of an element equal to the combined total height of the specificed slideshow id's
function setHeight(elementClass, slideshowIdArray){
    var totalHeight = 0;
    for(var i = 0; i < slideshowIdArray.length; i++){
        totalHeight += parseInt($('#slideshow'+slideshowIdArray[i]).height());
    }
    $('.'+elementClass).height(totalHeight);
}

//将元素的高度设置为特定幻灯片放映id的总高度的总和
函数设置高度（elementClass，Slideshowidaray）{
var totalHeight=0；
对于（变量i=0；i

我用您的JSFIDLE提供了一个工作示例


在初始页面加载期间，我调用了这个函数一次，并将box类和两个要匹配高度的幻灯片数组一起传递给它

我假设您希望幻灯片6与页面上所有其他幻灯片的底部齐平，但是，您的box div中的H5标记似乎有一个边距设置，这会导致幻灯片6推到比其他幻灯片稍低的位置。这可以使用CSS进行调整（删除边距），或者可以修改javascript来说明这一点。您的选择几乎是正确的，只是style.height属性不是直数，即.10px或100%，因此您无法比较原始值，必须先解析它们，或者使用.offsetHeight（或两者兼而有之）然后在设置时重新添加单位类型。请注意：。样式属性为读/写属性。此外，必须在代码中设置.style.height属性，然后才能读取它（因此请改用offsetHeight）。您的box div中也缺少id属性，例如..

要修复上述代码，请执行以下操作：

var rightHeight=parseInt(document.getElementById('box').offsetHeight);
var leftHeight=parseInt(document.getElementById('slideshow3').offsetHeight);
if(leftHeight>rightHeight){
    document.getElementById('box').style.height=leftHeight+'px';
}else{
    document.getElementById('slideshow3').style.height=rightHeight+'px';
}

你的问题的答案是：

var height1=parseInt(document.getElementById('slideshow4').offsetHeight);
var height2=parseInt(document.getElementById('slideshow5').offsetHeight);
document.getElementById('box').style.height=(height1+height2)+'px';

请共享一个JSFIDLE。style是一个只读属性，不应编辑。是否可以尝试使用setAttribute并查看它是否有效？
document.getElementById（'element'）。setAttribute（'style'，'height:value'））
？@SatejS请参见Thanks@JermyRajan请查看Thanks您需要支持哪些浏览器？无法
flex
执行此操作？我正在尝试获取
slideshow3
和
slideshow4
的高度，并将其设置为
box
请查看我的Thankshtmlement.style.height；）使用它而不是htmlement.setAttribute（）谢谢@bug我想你可能就是我的解决方案。它适用于我的JSFIDLE示例。我会在我的实际项目中测试它，然后回来。只是为了确保。这将适用于所有运行js的浏览器，对吗？再次感谢。我不得不对我的文本做一些调整（去掉页边空白，替换为填充），但结果都很完美。非常感谢。上帝保佑。另外，悬赏奖励将在18小时内完成。代码是跨浏览器的，也适用于旧浏览器。您的选项也适用，但我更喜欢@bug（'S）。谢谢你的意见。另外，bug忘了提到保证金会把事情搞砸。但通过阅读你的回复，我能够解决这个问题。谢谢，上帝保佑。没问题。我也会和他一起去，因为你已经熟悉了@emackey也有一个很好的答案，在一行中处理所有的事情。
var rightHeight=parseInt(document.getElementById('box').offsetHeight);
var leftHeight=parseInt(document.getElementById('slideshow3').offsetHeight);
if(leftHeight>rightHeight){
    document.getElementById('box').style.height=leftHeight+'px';
}else{
    document.getElementById('slideshow3').style.height=rightHeight+'px';
}

var height1=parseInt(document.getElementById('slideshow4').offsetHeight);
var height2=parseInt(document.getElementById('slideshow5').offsetHeight);
document.getElementById('box').style.height=(height1+height2)+'px';