九宫格高度为何更改无效

解决办法：下面粗斜体部分是修改过的九宫格事例代码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是去掉九宫格顶部的空白。