Angular: Page overflows when height of both html and body is set to 100%
Question
I'm developing a SPA using Angular, and I have specified html, body { height: 100% } and body { margin: 0 } in CSS. In this situation, if I use HTML tags with default margins in a component, such as <h1> tag, the page will overflow.
This seems to be due to the fact that the margin of the first element of body is replaced by the margin of the body, which is different from the behavior in plain HTML. In plain HTML, the top margin of the first element is ignored, and the body never has a margin. However, this behavior is not the case in Angular (or React, to be precise).
What is the cause of this?
Also, is there any way to achieve the normal HTML behavior in Angular?
Samples in Stack Blitz are as follows:
- Plain HTML:https://stackblitz.com/edit/web-platform-x6cd4l?file=index.html
- Angular: https://stackblitz.com/edit/angular-ivy-2yrmkw?file=src/app/app.component.ts
- React: https://stackblitz.com/edit/react-ts-4mdnyl?file=index.tsx
Thanks in advance.
1 answers
solution1
1 ACCPTED 2021-10-07 05:19:51
Looks like it's your HTML version is missing <!DOCTYPE html> , so it's being rendered differently. And the overflow is caused by the H1 having a top margin, causing a margin between the body and html.
Once you've added the doctype you can then set margin-top: 0 for h1 and the problem should no longer exist.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.