php - 按窗口高度的比例更改多个 div 的高度

Question

我在我的网站上使用 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 的高度是否小于我的窗口高度。

第三:然后将高度独立地应用到每个 div。

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

事实上，我正试图找到一种方法来使用 foreach 语句，例如在 php 中......

谁能帮我解决这个问题？

非常感谢您的宝贵时间，

Answer 1

如果我没理解错的话，您是在尝试将每个 div 设置为窗口的 View 高度。在那种情况下，如果你觉得舒服的话supporting only modern browsers , 你可以查看 CSS 单元 VH and VW分别为 View Height 和 View Width 设置 div 的宽度和高度。

至于你当前的 JS，我不太确定你试图用你的代码完成什么，如果你试图将每个 div 设置为窗口高度，你就不需要做所有那些复杂的测量并将高度设置为客户端高度？