主页面嵌入子页面后，子页面最右侧无法填充

分类：MUI

mui

主页面只有一个header，为了子页面实现下拉刷新。

主页面嵌套子页面

mui.init({  
            subpages:[{  
                url:'statist_sub.html',  
                id:'statist_sub.html',  
                styles:{  
                    top: '45px',  
                    bottom: '0px'  
                }  
            }]  
        });

嵌入子页面后，为什么子页面的右侧有一大块空白？如截图框住部分所示
子页面部分代码：

<body>  
    <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <ul class="mui-table-view mui-table-view-chevron">  
                <li class="mui-table-view-cell mui-media">                    
                    <div class="mui-media-body">  
                        今天营业额  
                        <p class="mui-ellipsis" id="today_total"></p>  
                    </div>  
                </li>  
                <li class="mui-table-view-cell mui-media">  
                    <div class="mui-media-body">  
                        日均营业额对比  
                        <p class="mui-ellipsis" id="day_avg"  style="width: 100%; height: 200px;"></p>  
                    </div>  
                </li>  
                <li class="mui-table-view-cell mui-media">  
                    <div class="mui-media-body">  
                        每月总营业额对比  
                        <p class="mui-ellipsis" id="month_total" style="width: 100%; height: 200px;"></p>  
                    </div>  
                </li>  
...  
...  
...

2016-03-21 14:13 负责人:无分享

3 个回复

BoredApe - 有问题就会有答案。

审查元素看看是什么

AlvinChim (作者)

页面结构就是上图所示的。我用的是手机调试，怎么看审查元素

2016-03-21 14:28
BoredApe

http://ask.dcloud.net.cn/article/69

2016-03-21 14:57

DCloud_UNI_FXY

可以看到底部边线是100%的。那说明是你其他区域的样式设置问题，比如图表样式没有设置100%

AlvinChim (作者)

刚才试着用上面的结构新增了一个div

<div id="aaa" class="mui-content mui-scroll-wrapper">  

    <div class="mui-scroll">  

        <ul class="mui-table-view mui-table-view-chevron">  

            <li class="mui-table-view-cell mui-media">  

                aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  

                <div class="mui-media-body">  

                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  

                </div>  

            </li>  

        </ul>  

    </div>          

</div>

发现第一个<li class="mui-table-view-cell mui-media">显示是正常的，但是后面那个<div class="mui-media-body">的显示也是右侧有一块空白。

2016-03-21 15:05

AlvinChim (作者)

刚刚试着按照上面的结构新增了一个测试结构

    <div id="aaa" class="mui-content mui-scroll-wrapper">  
        <div class="mui-scroll">  
            <ul class="mui-table-view mui-table-view-chevron">  
                <li class="mui-table-view-cell mui-media">  
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                    <div class="mui-media-body">  
                        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa  
                    </div>  
                </li>  
            </ul>  
        </div>        
    </div>

发现第一个'aaa...'显示正常，第二个'aaa...'就有异常了

DCloud_UNI_FXY

把mui-table-view-chevron去掉，这个样式表示右侧有箭头，所以右侧会空出来一段区域显示箭头

2016-03-21 15:53
AlvinChim (作者)

回复 DCloud_UNI_FXY:对，就是这个问题。非常感谢！

2016-03-21 15:58

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

主页面嵌入子页面后，子页面最右侧无法填充

3 个回复

公告

相关问题

主页面嵌入子页面后，子页面最右侧无法填充

与内容相关的链接

3 个回复

公告

相关问题