css位置问题显示epub文件答案

【问题标题】：css position issue displaying epub filecss位置问题显示epub文件
【发布时间】：2021-06-12 16:06:35
【问题描述】：

请帮助我定位显示的 epub。它应该显示在一个名为area的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>

谢谢蒂姆

【问题讨论】：

标签： html css epub

【解决方案1】：

好的，感谢所有查看问题的人，终于我能够弄清楚我的错误在哪里，它在 css 中，我将边距和填充应用于区域内的 div，而不是直接应用于区域，我将在下面发布解决方案。谢谢。

#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;
}

谢谢大家

【讨论】：