肉饼博客

Talk is cheap. Show me the code.

0%

【Angular】AdminLTE body高度异常问题解决

一、问题描述

如下图,从登录页进入主页后,body高度异常,此issue应该不限于angular与adminLTE的组合
cutoff .PNG

版本:

  • Angular : 5
  • AdminLTE: 2.4.3

二、解决

参考 AdminLTE官方issue

在对应的组件类中添加如下代码,即可修复

1
2
3
4
5
declare var $:any;

ngOnInit() {
$('body').layout('fix');
}

对应的模板:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="wrapper">

<!-- Main Header -->
<app-header></app-header>
<!-- Left side column. contains the logo and sidebar -->
<app-menu></app-menu>

<!-- Content Wrapper. Contains page content -->
<app-content></app-content>
<!-- /.content-wrapper -->

<!-- Main Footer -->
<app-footer></app-footer>

<!-- Control Sidebar -->
<!---->
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
</div>
<!-- ./wrapper -->