FlexSlider 上的 100% 高度幻灯片答案

【问题标题】：100% height slides on FlexSliderFlexSlider 上的 100% 高度幻灯片
【发布时间】：2018-10-10 11:18:46
【问题描述】：

我正在尝试使用 FlexSlider 创建一个响应式滑块。我的目标是让所有幻灯片的最大高度等于.flexslider 100% 高度。

以下 sn-p 显示了我的问题：我希望所有幻灯片（红色和绿色）都具有最大高度，覆盖容器高度（独立于其内容）。我尝试设置height:100%;，但它不起作用。我能做什么？

FIDDLE

【问题讨论】：

请看给出的答案，我已经在 JQuery 的帮助下完成了，但我认为这对你有用。
Flexslider <li> height's equal the tallest <li> on a mobile browser的可能重复
你不想在 JQuery 中解决？
我更喜欢纯CSS，但如果jQuery是唯一的方法，我会考虑的。

标签： css height flexslider

【解决方案1】：

请在下面给出JS代码

 function setEqualHeight(selector) {
        var heights = new Array();

        $(selector).each(function() {

            $(this).css('min-height', '0');
            $(this).css('max-height', 'none');
            $(this).css('height', 'auto');

            heights.push($(this).height());
        });

        var max = Math.max.apply( Math, heights );
    $(selector).each(function() {
            $(this).css('height', max + 'px');
        }); 
    }


        setEqualHeight('.slides li');

        $(window).resize(function() {

            setTimeout(function() {
                setEqualHeight('.slides li');
            }, 120);
        });

$('.flexslider').flexslider({
    animation: "slide"
});

见Updated Demo for Window Resize

【讨论】：

这个解决方案是正确的。我想在调整窗口大小的情况下扩展它。我在你的 sn-p 中添加了$(window).resize(function () { setHeight($('.slides li')); });，但它似乎不起作用。
让我试试看
函数在调整大小时工作正常，您可以在 setheight 函数中应用 al;ert 后检查，但一件事是它在调整大小时内容的工作方式是相同的，以及为什么要更新高度。
如果您在 sn-p 中减小“结果”窗口的宽度，您可能会看到部分绿色内容被隐藏（这是不正确的）。这就是为什么我必须在每次调整窗口大小时更新高度。
是的，我正在努力，最多 10 分钟内通知您

【解决方案2】：

在默认主题之后添加这个：

html {height: 100%}
body {height: 100%; margin: 0;}
.flex-viewport, .flexslider, .slides {height: 100%;margin: 0;border: none;border-radius: 0;}
.flexslider .slides > li {height: 100%;}
.flex-control-nav {bottom: 10px}

很快我会更新并修复方向导航按钮溢出

【讨论】：

快到了，@BrainStack。但我的目标是将所有幻灯片高度设置为等于最大幻灯片高度（在我的情况下，我将保持绿色幻灯片高度不变，并将红色幻灯片高度设置为等于绿色高度）。在您的情况下，所有幻灯片都有 html 高度，这可能会根据浏览器窗口高度显示额外的背景或隐藏内容。

【解决方案3】：

height:100% 不起作用，因为它没有固定高度的父级。所以红色内容根据它的内容设置它的高度。在这种情况下，您可以在 #Red class 中设置一些 min-height。它会解决你的问题。

#red {
background:red;
min-height:160px;

}

【讨论】：

嗨@user3584501。感谢您的帮助，但我认为不幸的是它不是很灵活。由于滑块必须响应，内容滚动取决于窗口宽度和幻灯片高度可能超过 160 像素或导致显示额外的背景。我的目标是将所有幻灯片设置为最大高度（在本例中为绿色高度），这也是 flexslider 高度并且无法修复。

【解决方案4】：

在我的例子中，我能够使用 display:flex; 组合一个纯 CSS 的解决方案。这个特殊的 flexslider 是视口宽度的 100%，所以我能够为每张幻灯片的 flexbasis/width 使用 100vw。

ul.slides {
    display: flex;
    flex-wrap: wrap;
}

li.slide {
    width: 100vw;
    flex-basis: 100vw;
}

编辑：我在另一个站点上的非 100vw flexslider 上进行了尝试，只需添加 ul.slides { display: flex; } 就足以满足大多数使用情况。

这是一个 Fiddle 叉子：http://jsfiddle.net/jokptLyh/

【讨论】：