EPUB电子书XHTML排版问题：body未占满viewport宽度

你遇到的问题核心是盒模型未正确设置加上全局选择器的强制宽度规则冲突，导致body和p标签的宽度计算混乱。咱们一步步拆解问题并修复：

问题根源分析 #

1. 全局选择器的强制宽度：你给*设置了max-width: 100vw; min-width: 100vw;，这会强制所有元素（包括body、p）的宽度固定为视口宽度，但默认盒模型是content-box——元素的width只计算内容区，padding会额外增加总宽度，直接导致p标签的width:100% + padding:30px左右总宽度超出视口，同时body的width:100%被全局的min-width覆盖，无法自适应调整。
2. p标签的溢出问题：p标签设置了width:100%再加左右各30px的padding，在默认盒模型下，总宽度会是100%+60px，自然会超出body的范围。

修复方案 #

修改后的CSS代码 #

* { 
  margin: 0; 
  padding: 0; 
  text-decoration: none; 
  list-style-type: none; 
  font-family: 'Palatino Linotype', serif;
  /* 移除强制的min/max-width，避免覆盖元素自身宽度设置 */
  /* 全局设置盒模型，让width包含padding和border */
  box-sizing: border-box;
} 

body { 
  width: 100%;
  /* 确保body没有额外内边距或外边距，铺满视口 */
  margin: 0;
  padding: 0;
} 

#title { font-size: 50px; padding: 50px 30px; } 
h1, #author, .copyright { text-align: center; padding: 30px; } 
.ack { text-align: center; } 
h1 { padding: 30px; } 
p { 
  width: 100%; 
  text-align: justify; 
  padding: 30px; 
  /* 现在box-sizing生效，padding不会让p超出body宽度 */
} 
a { display: list-item; text-align: center; color: #d40000; padding: 30px; } 
.page-break { page-break-before: always; } 
#img-1 { 
  width: 100%; /* 改成100%避免超出视口 */
  height: 40vh; 
  background: url(../Images/1.jpg) no-repeat center center; 
  background-size: cover; 
}

关键修改说明 #

• 添加box-sizing: border-box：这是核心修复，让所有元素的width计算包含padding和border，彻底解决padding导致的溢出问题。
• 移除全局的max-width:100vw和min-width:100vw：强制视口宽度会破坏元素的正常流式布局，body作为块级元素默认会占满父容器宽度，不需要强制设置。
• 调整#img-1的宽度为100%：原来的110%会导致图片超出视口，改成100%后配合box-sizing，图片会自适应视口宽度且背景居中显示。
• XHTML小细节修正：你的h2标签里id="author "多了个空格，建议改成id="author"，避免锚点或样式选择器失效；另外XHTML里的<link>标签推荐写成自闭合形式<link rel="stylesheet" href="Styles/style.css" />，更符合规范。

这样修改后，body会铺满整个视口，p标签的padding不会导致溢出，布局就能恢复正常了。

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