H5微应用满屏显示

公司企业是以DingTalk钉钉作为OA系统。
H5微应自然少不了。

应用发布后，内容不足一屏时，footer会跑到页顶。
为了解决此问题，决定使用flex布局。
只需要在ASP.NET MVC布局视图_Layout.cshtml做好处理即可。

 

上面截图，sytele是收合起。从下面可见详细。

 

 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-size: 9pt;
 }

 body {
     display: flex;
     flex-direction: column;
     min-height: 100vh; 
 }

 header {
     /*height: 50px;*/
     /* background-color: #457B9D;*/
     flex-shrink: 0; 
 }

 main {
     flex: 1; 
     width: 100%;
     flex-shrink: 0;
 }

 footer {
     height: 30px;
     background-color: #457B9D;
     flex-shrink: 0;
 }

 

页面套用此布局的，在浏览时，内容少，满屏显示， footer始终靠底。内容多，屏幕右边（y轴）滚动条。