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