Question

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

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

Answer 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

Answer 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}

很快我更新了方向导航按钮溢出的修复

Answer 3

高度：100％将无效，因为它没有父级具有某种修复高度。所以红色内容根据它的内容设置它的高度。在这种情况下，您可以在 #Red class 中设置一些 min-height 。它会解决你的问题。

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

}

Answer 4

就我而言，我能够使用display：flex;将仅CSS的解决方案结合在一起。这个特殊的flexslider是视口宽度的100％，因此我能够将100vw用于每个幻灯片的flexbasis / width。

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

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

编辑：我在另一个站点的非100vw flexslider上进行了尝试，只需添加ul.slides { display: flex; }就足够了。

这是小提琴叉子：http://jsfiddle.net/jokptLyh/

FlexSlider上100％高度滑动

4 个答案: