HTML & body height 该怎么管理?
HTML, body 没有高度,body 依赖 内容来撑自己的高,而 HTML 也是依赖 body 撑自己的高。
这不符合我们看到的,所以市场开始出现
html,
body {
height: 100%;
}
可是 body 的内容是会超过 100% 的,那么比较合适的是做成 min-height
body {
min-height: 100vh;
}
这样看起来比较合理,因为 HTML 依赖 body 撑高,body 也有最少的高
虽然 100vh 解决了高度问题,但是又引发另一些问题,点击我
总结
CSS reset 做了些调整,但是还是要留意 mobile URL bar 怎么影响用户体验。目前没有一招打天下的方法。
Links
- https://greggod.medium.com/css-do-not-put-height-100-on-the-body-html-e36bda3551b3
- https://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height
- https://www.freecodecamp.org/news/html-page-width-height/
- https://youtu.be/dpuKVjX6BJ8