嘿，我看你用Internet Archive BookReader搭建图片书的时候，碰到了顶部一直留空白的问题——之前调整页面高度搞定了底部的问题，现在咱们来解决顶部的～

先结合你给的代码分析下：你第一个页面（Lomo.png）的高度设为800px，后面所有页面都是1130px，BookReader的布局逻辑通常会以所有页面的最大高度来计算容器空间，这就可能导致小高度的页面上下出现留白；另外也可能是BookReader默认给页面加了顶部内边距/外边距，或者初始化时的布局参数没调好。

给你几个针对性的解决办法，按优先级试试：

方法1：统一页面高度（最直接） #

第一个页面高度和其他页面不一致，这大概率是顶部留白的核心原因。BookReader会以所有页面中的最大高度设置容器高度，当第一个页面只有800px高时，剩下的330px就会变成上下留白（默认是垂直居中对齐）。

修改第一个页面的height参数，和其他页面保持一致的1130px：

var options = {
  ppi: 100,
  data: [
    [{
      width: 800,
      height: 1130, // 这里改成1130，和其他页面高度统一
      uri: '/assets/images/Chiloe/Lomo.png'
    }, ],
    // 后续页面配置保持不变...
  ],
  // 其他初始化选项不变...
};

如果你的Lomo.png图片本身高度就是800px，BookReader会自动把图片在1130px的容器里垂直居中。要是你想让图片顶对齐，还可以在初始化选项里加一行：

var options = {
  ppi: 100,
  verticalAlign: 'top', // 新增该选项，让页面内容顶对齐容器
  data: [
    // 页面数据不变...
  ],
  // 其他选项不变...
};

方法2：覆盖默认CSS消除顶部空白 #

要是统一高度后还有留白，可能是BookReader的默认样式给页面容器加了顶部边距/内边距。可以添加自定义CSS来覆盖：

/* 去掉页面容器的顶部内外边距 */
.BRpage {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* 同时检查主容器的顶部空白 */
.BRcontainer {
  padding-top: 0 !important;
}

方法3：调整初始化的布局参数 #

BookReader有控制页面边距的内置选项，你可以在初始化时添加pageMargin: 0来去掉默认的页面边距：

var options = {
  ppi: 100,
  pageMargin: 0, // 新增该选项，移除页面默认边距
  data: [
    // 页面数据不变...
  ],
  // 其他选项不变...
};

你可以先试方法1，因为页面高度差异是最明显的诱因。如果改完还有空白，再结合方法2或3微调就行～

内容来源于stack exchange