关于图片轮播（gallery slider）中如何使用style="height: 100%;"的问题

分类：MUI

说先说说我对height:100%的理解
在html中，高度是可以用百分比来确定的，但前提是可以从父级中获取对应高（抑或说绝对高？）
譬如
html,body{
width: 100%;
height: 100%;
}
<html >
<body>
<div>
……
</div>
</body>
</html >

上面<div></div>中是可以通过height: XX%;来控制的，但如果body中缺少了height: 100%;，则无法继续往下传

类似上面代码，其中有一层div没有获取对应父级的高，下一层也无法用百分比来设置高，最后一层的style="height: 50%;background: #007AFF;"将无法显示
那么问题来了关于图片轮播（gallery slider）中的 <div class="mui-slider-group mui-slider-loop" > 中的高究竟是怎样的？求大神指教~
<div class="mui-slider-group mui-slider-loop" style="height: 100%;">这样表达也无法将高传给下一层
<div class="mui-slider-item mui-slider-item-duplicate"> 无法直接用百分比的高

事实上..我还试过把下面的...能设置的高都改了一下..还是无法达到效果（其实我就是想通过百分比来控制图片轮播，包括图片的高，可是做不出效果，本人新手，求指导）

.mui-slider-group{  
    height: 100%;  
}  
.mui-slider .mui-slider-group{  
    height: 100%;  
}  
.mui-slider-loop{  
    height: 100%;  
}  
.mui-slider .mui-slider-loop{  
    height: 100%;  
}  
.mui-slider .mui-slider-group.mui-slider-loop {  
    height: 100%;  
}  
.mui-slider .mui-slider-group .mui-slider-item .mui-table-view:before, .mui-slider .mui-slider-group .mui-slider-item .mui-table-view:after {  
    height: 100%;  
}

2015-02-04 16:52 负责人:无分享

3 个回复

DCloud_UNI_FXY

你百分比控制轮播高度的原因是什么？

唔知咧 (作者)

想在不同设备所占的比例都相同（譬如height:90%;）

2015-02-04 21:59

DCloud_UNI_FXY

参考这个全屏轮播demo

<html><head>  
        <meta charset="utf-8">  
        <title>Hello MUI</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <style>  
            html,body {  
                background-color: #efeff4;  
            }  
            header.mui-bar{  
                display: none;  
            }  
            .mui-bar-nav~.mui-content{  
                padding: 0;  
            }  
        </style>  
    </head>  
    <body class="mui-ios">  

        <div class="mui-content">  

            <div id="slider" class="mui-slider mui-fullscreen" data-slider="1">  
                <div class="mui-slider-group mui-slider-loop" style="-webkit-transform: translate3d(-1179px, 0px, 0px) translateZ(0px); -webkit-transition-duration: 0ms; transition-duration: 0ms; -webkit-transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);">  
                    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#">  
                            <img src="../images/yuantiao.jpg">  
                        </a>  
                    </div>  
                    <!-- 第一张 -->  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../images/shuijiao.jpg">  
                        </a>  
                    </div>  
                    <!-- 第二张 -->  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../images/muwu.jpg">  
                        </a>  
                    </div>  
                    <!-- 第三张 -->  
                    <div class="mui-slider-item mui-active">  
                        <a href="#">  
                            <img src="../images/cbd.jpg">  
                        </a>  
                    </div>  
                    <!-- 第四张 -->  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="../images/yuantiao.jpg">  
                        </a>  
                    </div>  
                    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#">  
                            <img src="../images/shuijiao.jpg">  
                        </a>  
                    </div>  
                </div>  
                <div class="mui-slider-indicator">  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator mui-active"></div>  
                    <div class="mui-indicator"></div>  
                </div>  
            </div>  
        </div>  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            var slider = mui("#slider");  
            document.getElementById("switch").addEventListener('toggle', function(e) {  
                if (e.detail.isActive) {  
                    slider.slider({  
                        interval: 5000  
                    });  
                } else {  
                    slider.slider({  
                        interval: 0  
                    });  
                }  
            });  
        </script>  

</body></html>

唔知咧 (作者)

好的，谢谢！

2015-02-04 22:10
唔知咧 (作者)

不好意思，又麻烦一下..

上面的代码通过mui-fullscreen(也就是设定height:100%;)来扩张了<div id="slider" class="mui-slider mui-fullscreen" data-slider="1">这个div，但里面的图片的高还是不能控制，来到<div class="mui-slider-group mui-slider-loop"……>这个div就无法把height:100%再传到子级的去了。

因为在不同设备的屏幕比例不同，我想强制性让图片占一定屏幕比例(适当拉伸一下图片也没所谓，因为不想有的屏幕出现一块底色块)，我试过在不知道是不是mui-slider-group和mui-slider-loop这两个样式有冲突，我去掉mui-slider-group后，直接在后面增加style="height: 100%;"是可以把height传到图片那一级的

2015-02-05 10:42
DCloud_UNI_FXY

建议轮播的高度固定，剩余区域则是弹性的。

2015-02-05 22:44

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

做登陆前的导航页需要用到slider，解决图片全屏我这边有两种方式：

通过css

通过js
并且在该导航页上实现了页面导航页判断是否加载的功能。
具体代码如下：


<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  
    <link href="css/mui.min.css" rel="stylesheet" />  
    <style>  
        /*js代码解决图片全屏，代码量较少*/  
        /*html,  
        body {  
            height: 100%;  
        }  
        .mui-content {  
            height: 100%;  
            padding: 0;  
        }  
        .mui-slider {  
            height: 100%;  
        }  
        .mui-slider-group {  
            height: 100%;  
        }  
        .mui-slider-item {  
            height: 100%;  
        }  
        a {  
            height: 100%;  
        }  
        img {  
            height: 100%;  
        }*/  
        /*设置登陆按钮样式*/  

        .mui-btn {  
            position: relative;  
            top: 50%;  
            /*background: rgba(255, 255, 255, 0.5);*/  

            color: rgb(76, 255, 255) !important;  
            width: 40%;  
            height: 60px;  
            left: 30%;  
            border: none;  
            font-size: x-large;  
        }  
        .mui-btn:hover {  
            background: rgba(76, 217, 100, 0.5);  
        }  
    </style>  
</head>  

<body>  
    <div class="mui-content">  
        <div id="slider" class="mui-slider">  
            <div class="mui-slider-group mui-slider-loop">  
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->  
                <div class="mui-slider-item mui-slider-item-duplicate">  
                    <a href="#">  
                        <div class="dimg" style="background-image:url(images/yuantiao.jpg);background-size: cover;">  
                            <button class="mui-btn mui-btn-positive mui-btn-outlined">了解更多</button>  

                        </div>  
                    </a>  
                </div>  
                <!-- 第一张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="images/shuijiao.jpg">  
                    </a>  
                </div>  
                <!-- 第二张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="images/muwu.jpg">  
                    </a>  
                </div>  
                <!-- 第三张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <img src="images/cbd.jpg">  
                    </a>  
                </div>  
                <!-- 第四张 -->  
                <div class="mui-slider-item">  
                    <a href="#">  
                        <div class="dimg" style="background-image:url(images/yuantiao.jpg);background-size: cover;">  
                            <button class="mui-btn mui-btn-positive mui-btn-outlined">了解更多</button>  

                        </div>  

                    </a>  

                </div>  
                <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->  
                <div class="mui-slider-item mui-slider-item-duplicate">  
                    <a href="#">  
                        <img src="images/shuijiao.jpg">  
                    </a>  
                </div>  
            </div>  
            <div class="mui-slider-indicator">  
                <div class="mui-indicator mui-active"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
            </div>  
        </div>  
    </div>  
    <script src="js/mui.min.js"></script>  
    <!--<script src="js/app.js"></script>-->  
    <script type="text/javascript" charset="utf-8">  
        mui.init();  

        mui.ready(function() {  
                checkIsView();  
                mui("img").each(function(index) {  
                    this.height = window.innerHeight;  
                    //                      console.log(this.height);  
                });  
                mui(".dimg").each(function(index) {  
                        this.style.height = window.innerHeight.toString() + "px";  
                        //                          console.log(this.style.height.toString());  
                    })  
                    //防止初始加载时即导向第二个页面  
//                  setTimeout("slid()", 2000);  
            })  
            /**  
             *@description 设置图片轮播时间  
             */  

        function slid() {  
                mui("#slider").slider({  
                    interval: 3000  
                })  
            }  
            /**  
             * @description 判断是否完全打开的当前页面  
             */  

        function checkIsView() {  
            var exist = window.localStorage.getItem("PageGuidIsExist");  
            console.log(exist);  
            if (exist == null || exist == undefined) {  
                //加载时判断是否第一次打开程序  
                window.localStorage.setItem("PageGuidIsExist", true);  
            } else if (exist) {  
                console.log("转向登陆页面");  
            } else {  
                window.localStorage.setItem("PageGuidIsExist", true);  
            }  
        }  

    </script>  
</body>

</html>

该问题目前已经被锁定, 无法添加新回复

关于图片轮播（gallery slider）中如何使用style="height: 100%;"的问题

3 个回复

公告

相关问题

关于图片轮播（gallery slider）中如何使用style="height: 100%;"的问题

与内容相关的链接

3 个回复

公告

相关问题