Question

我正在研究一个相当复杂的网站设计。我有以下4个容器（我称之为，但它们没有.container类）

在宽屏幕布局中：

在狭窄的屏幕布局中：

我遇到的问题是在宽屏幕布局上将白色，灰色和黄色容器的总高度与蓝色容器相匹配：

灰色和黄色容器位于.row div中，因此添加样式{ display: inline-flex }会使它们在窄屏幕布局上的高度相同：

然而，这会将它们完全移动到宽屏幕布局的一侧，这与蓝色容器的白色，灰色和黄色组合容器不匹配：

Answer 1

我尝试了@Paulie_D推荐的JavaScript解决方案。

$(window).load(function () {
    NormalizeHeights();
});

window.onresize = function (event) {
    NormalizeHeights();
}

function NormalizeHeights() {
    if (window.innerWidth >= 768) {

        var carousel = $(".carousel-container");
        var dashTop = $(".dash-row-top");
        var panelLeft = $(".dash-row-bottom .panel-lightgray");
        var panelRight = $(".dash-row-bottom .panel-yellow");

        var carouselHeight = parseFloat(carousel.css('height'));
        var dashTopHeight = parseFloat(dashTop.css('height'));
        var panelLeftHeight = parseFloat(panelLeft.css('height'));
        var panelRightHeight = parseFloat(panelRight.css('height'));
        var dashBottomHeight;

        if (panelLeftHeight > panelRightHeight) {
            dashBottomHeight = panelLeftHeight;
        }
        else {
            dashBottomHeight = panelRightHeight;
        }

        if (carouselHeight > (dashTopHeight + dashBottomHeight)) {
            var difference = carouselHeight - (dashTopHeight + dashBottomHeight);
            panelLeft.css("height", (dashBottomHeight + difference));
            panelRight.css("height", (dashBottomHeight + difference));
        }
        else {
            var difference = (dashTopHeight + dashBottomHeight) - carouselHeight;
            carousel.css("height", (carouselHeight + difference));
            panelLeft.css("height", (dashBottomHeight));
            panelRight.css("height", (dashBottomHeight));
        }
    }
}

这可以解决问题，但在我的估计中这是非常不可思议的。

Answer 2

我遇到了类似的问题，我找到的解决方案相当丑陋，但对我有用。

我使用了可以清除格式的div，但是它们的存在会受到限制（使用ng-if）。以编程方式，我测量了屏幕的宽度并设置了一个阈值。如果宽度高于阈值，我设置div的位置，测量内容的高度，并在适用时强制更改所有相关div的高度看起来相同（请注意，您需要设置此大小触发TIMER后更新以使渲染完成。

希望这会给你一些想法并记住：我是第一个称之为丑陋的人。

Bootstrap - 匹配不在一行中的垂直列高度

2 个答案: