使body占有整个页面

今天在完成DOM中的一个小实例(鼠标点击页面可知道是鼠标左键,中键还是右键点击了页面)时发现不知道如何将body覆盖整个页面

度娘上有说给body设置font-size:100%,或者是width:100%,height:100%,但是都没有解决问题

我看了百度的源代码才找到答案
要给html,body都设置高度为100%才行

html,body{
	height: 100%;
}

在这里插入图片描述
这样设置还不够,body外还有margin,所以没有占满整个页面

html,body{
	height: 100%;
}
body{
	margin: 0;
}

这样即可
在这里插入图片描述

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要将 Angular Material 中的 mat-drawer 滚动整个 body,可以使用 CSS 样式和 JavaScript 代码来实现。以下是实现的步骤: 1. 在 CSS 中设置 body 的 overflow 属性为 hidden,以防止页面滚动: ```css body { overflow: hidden; } ``` 2. 在 mat-drawer 的容器中设置 overflow 属性为 auto,以允许内容滚动: ```html <mat-drawer-container> <mat-drawer #drawer mode="side"> <!-- Drawer content --> </mat-drawer> <div class="drawer-content"> <!-- Main content --> </div> </mat-drawer-container> ``` ```css .drawer-content { overflow: auto; height: 100vh; } ``` 3. 在 JavaScript 中使用 ViewChild 来获取 mat-drawer 的实例,然后在打开和关闭 drawer 的时候添加和移除 CSS 类来控制 body 的滚动: ```typescript import { Component, ViewChild } from '@angular/core'; import { MatDrawer } from '@angular/material/sidenav'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild('drawer') drawer: MatDrawer; toggleDrawer() { if (this.drawer.opened) { document.body.classList.remove('no-scroll'); } else { document.body.classList.add('no-scroll'); } this.drawer.toggle(); } } ``` 4. 在 CSS 中定义 no-scroll 类来设置 body 的 overflow 属性为 hidden,并且添加一个 padding-right 属性来防止页面抖动: ```css .no-scroll { overflow: hidden; padding-right: 15px; } ``` 这样就可以实现在打开 mat-drawer 时禁止 body 滚动,并在关闭时允许滚动。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值