css 显示 epub 文件的位置问题

Question

我需要帮助来定位我显示的 epub。它应该显示在 div 调用区域，但我发现很难向 div 区域添加边距或填充，它只是不生效。

至少让 epub 离页边距有点远。

下面是我的html:

html,
body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

#reader {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 10;
  left: 20;
  bottom: 10;
  right: 20;
  background: wheat;
  display: flex;
  flex-direction: column;
}

#reader #toolbar {
  flex: 0 1 auto;
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
}

#reader #toolbar .left {
  flex: 0 1 auto;
}

#reader #toolbar .center {
  flex: 0 1 auto;
}

#reader #toolbar .right {
  flex: 0 1 auto;
}

#reader #area {
  flex: 1 0 auto;
  display: flex;
}

#reader #area div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div id="reader">
  <input type="file" id="bookChooser">
  <select id="toc"></select>
  <div id="area">
    <!-- Display epub here with margin or padding to format the epub or justify epub -->
  </div>
  <button id="prev" type="button"><</button>
  <button id="next" type="button">></button>
</div>

谢谢蒂姆

Answer 1

好的，感谢所有看过这个问题的人，我终于弄清楚了我的错误在哪里，它在 css，我正在对区域内的 div 应用边距和填充，我将 post 下面的解决方案，而不是直接应用于区域。谢谢

#reader #area {
  flex: 1 0 auto;
  display: flex;
  margin: 10px 15px;
  padding: 10px;
}

#reader #area div {
  position: absolute;
  /*All the below, was not necessary because it is already taken care of above*/
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

谢谢大家

css 显示 epub 文件的位置问题

css position issue displaying epub file

html

css

epub