按窗口高度的比例更改多个 div 的高度答案

【问题标题】：change height of multiple divs in proportion of window height按窗口高度的比例更改多个 div 的高度
【发布时间】：2015-02-10 08:10:12
【问题描述】：

我在我的网站上使用带有 jquery 循环的幻灯片。我所有的幻灯片都包含一个名为“cartouche_bottom_inside”的 div，我需要使每个 div 适应我的窗口高度。我的幻灯片是通过 php 生成的，所以基本上如果有这种结构：

<div id="slideshow">

    <div class="slide">

        <div class="cartouche_bottom_inside">

        /* my content */

        </div>

    </div>

    <div class="slide">

        <div class="cartouche_bottom_inside">

        /* my content */

        </div>

    </div>


        <div class="cartouche_bottom_inside">

        /* my content */

        </div>

    </div>

    <div class="slide">

        <div class="cartouche_bottom_inside">

        /* my content */

        </div>

    </div>

</div>

使用此 jquery 代码，我可以根据各种自定义变量更改“cartouche_bottom_inside”div 的高度。

function margin_bottom_cartouche(){

    var cartouche_bottom_inside_H = $(".cartouche_bottom_content").height();
    var margin_bottom_cartouche_add = windowH - cartouche_bottom_inside_H - cartouche_top_visible_H;

        if (cartouche_bottom_inside_H < windowH) {

            $(".cartouche_bottom_content").css("height",cartouche_bottom_inside_H + margin_bottom_cartouche_add -cartouche_top_visible_H);
        }       
}

它有效，但首先，在我的 if 语句中，$(".cartouche_bottom_content").height() 得到了我所有“cartouche_bottom_inside”div 的总和。

然后它将 $(".cartouche_bottom_content").height 应用于我所有的 div（取决于最高的 ".cartouche_bottom_content" div。

我想做的是：

1st : 首先检查每个 div 的高度

第二个：然后检查每个 div 的高度是否小于我的窗口高度。

3rd : 然后将高度分别应用到每个 div。

这意味着我的所有“.cartouche_bottom_content” div 将具有不同的高度。

事实上，我正在尝试找到一种方法来创建一个 foreach 语句，例如在 php 中......

谁能帮我解决这个问题？

非常感谢您的宝贵时间，

【问题讨论】：

标签： php jquery css height each

【解决方案1】：

如果我对您的理解正确，您正在尝试将每个 div 设置为窗口的视图高度。在这种情况下，如果您觉得 supporting only modern browsers 很舒服，您可以查看 CSS 单元 VH and VW 的 View Height 和 View Width 分别设置 div 的宽度和高度。

至于您当前的 JS，我不太确定您要使用代码完成什么，如果您尝试将每个 div 设置为窗口高度，则不需要进行所有这些复杂的测量并将高度设置为客户端高度？

【讨论】：

事实上我已经有了设置 div 高度的方法。我要做的是独立计算我所有的 div（因为它们共享同一个类），然后独立设置我的 div 的高度......你明白我的意思吗？
哦，我明白你现在要做什么了。是的，jQuery 中有一个 .each() 函数，它允许您单独访问与选择器匹配的每个 div。