如何非随机设置页面宽高？规范设置HTML与Body高度的方法

首先明确：你想让内部元素和body边缘留间距的需求，完全不需要给body设置固定高度，用padding就能解决。但还是先讲清楚设置页面高度的核心依据和规范：

一、设置页面高度的核心依据 #

• 内容优先（最常用）：页面高度应该由内部内容自然撑开，这是网页布局的默认逻辑。除非有特殊设计要求（比如全屏落地页、固定尺寸的弹窗），否则不要给body/页面容器设固定高度——固定高度会导致小屏幕内容溢出、大屏幕留白过多，无法适配不同设备。
• 视口适配（全屏需求）：如果需要页面至少占满当前设备的屏幕高度（比如全屏背景、登录页），用视口单位vh（1vh = 视口高度的1%），比如min-height: 100vh，这样不管是手机还是桌面屏，页面都会自动适配屏幕高度，内容超出时会自动延伸。
• 设计稿要求（固定场景）：如果是按照UI设计稿开发，严格遵循设计稿标注的高度数值，但只适合固定尺寸的独立组件（比如弹窗、卡片），不适用于响应式页面。

二、规范设置方法（含你的实际需求解决方案） #

1. 解决「元素和body边缘留间距」的正确方式 #

不要用固定height，直接给body加padding，配合box-sizing: border-box避免布局错乱：

body {
  padding: 24px; /* 上下左右留24px间距，可按需调整数值 */
  min-height: 100vh; /* 可选：确保页面至少占满屏幕高度 */
  box-sizing: border-box; /* 关键！让padding不会额外增加body的总高度/宽度 */
}

box-sizing: border-box会把padding和border算进元素的总尺寸里，避免body因为padding变高导致出现不必要的滚动条。

2. 确实需要固定高度的场景规范 #

如果必须设置固定高度（比如特定组件），注意这几点：

• 优先用min-height/max-height替代height：比如min-height: 600px保证容器至少600px高，内容多了自动拉长；max-height: 800px限制最高高度，超出时可滚动（配合overflow: auto）。
• 考虑目标设备的常见尺寸：比如移动端屏幕高度普遍在600-900px，桌面端在800-1200px，但固定高度只适合非响应式的封闭场景，响应式页面尽量用相对单位（vh、百分比）。
• 确保内容可访问：如果固定高度小于内容高度，一定要加overflow: auto让内容可滚动，避免内容被截断无法查看。

三、常见误区 #

• 不要随便给html/body设height: 500px这类固定值：除非你100%确定内容不会超过这个高度，否则内容会溢出body，导致布局混乱。
• 避免混用固定单位和相对单位：比如同时给body设height: 800px和min-height: 100vh，会导致小屏幕下页面被截断，大屏幕下留白过多。

内容的提问来源于stack exchange，提问作者91Flavio91