layui 高度自适应屏幕大小
时间: 2023-10-31 16:03:27 浏览: 222
在layui中,可以使用下面的代码实现高度自适应屏幕大小:
```javascript
layui.use(['element', 'layer'], function(){
var element = layui.element;
var layer = layui.layer;
// 窗口大小改变时,重新计算高度
$(window).on('resize', function(){
var windowHeight = $(window).height();
var bodyHeight = windowHeight - $('.layui-header').height() - $('.layui-footer').height();
$('.layui-body').height(bodyHeight);
}).trigger('resize'); // 初始化时触发一次resize事件
});
```
在上述代码中,`$(window).on('resize', ...)` 监听窗口大小改变事件,当窗口大小改变时,重新计算高度并设置`.layui-body`的高度为计算得到的值。其中,`.layui-header`和`.layui-footer`分别是头部和底部元素,需要根据实际情况进行调整。`$(window).height()`可以获取窗口的高度,计算出`.layui-body`的高度后,使用`.height()`方法设置即可。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)