求助：如图，在首页上用了一个滚动图片和九宫格，加上底部菜单的原因，九宫格最底下三个显示不全(红色标记部分，图片下面的字显示不出来)，想通过修改样式把九宫格缩小一点，设置了各种修改高度的样式都不管用，有没有什么办法能够设置九宫格或者滚动图片区域的高度按比例缩小？谢谢
heartofthesea
- 发布：2014-12-24 15:09
- 更新：2015-11-13 14:46
- 阅读：14569
mui-slider或九宫格如何修改大小？
分类：MUI
这都快一年了，不知道我的答案是否属于马后炮。我的做法是修改mui.css中
.mui-grid-view.mui-grid-9 .mui-table-view-cell{
padding: 8px 15px;
}
调整上下的padding就可以减少高度。还可以通过line-height来修改。
一搜九宫格高度问题就能搜到你的，一年了，你应该早解决了吧，下面的解决办法供其他参考吧。
解决办法：下面粗斜体部分是修改过的九宫格事例代码html的开头部分。
.mui-content{
height: 100%;
}
.app-table-view-cell{
height: 33.33333333%;
}
.app-anchor{
top: calc(50% - 42px);
}
<!-- 9宫格 -->
<div class="mui-content maindiv-layer" style=" background-color: transparent; position: fixed; padding-top: 0px;height: 60%;">
<ul id="grid_main" class="mui-table-view mui-grid-view mui-grid-9" style="background-color: transparent; margin-top: 0px; height: 100%;">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 app-table-view-cell" >
<a class="app-anchor" href="grid1.html">
<span class="mui-icon aliIcon-documents1"></span>
<div class="mui-media-body" style="color: white;">项目简介</div>
</a>
</li>
</ul>
</div>
【说明】
1、若想设置的height：100%起作用，需其父节点中有具体px的高度设置，或在html/body下设置100%，参考登录模板的例子中用到style.css的地方。
2、上文中height：60%为九宫格想设置的占屏幕的百分比。
3、将li标签即每个九宫格小格的高度设为33.33333333%（三行，如果是四行就是25%）。
4、更改后需调整a标签的位置在每个小格中高度居中，calc(50% - 42px); //42px是小格的高度84px的一半。
5、上文中将padding-top和margin-top都设为0px是去掉九宫格顶部的空白。
