css位置问题显示epub文件

Posted 2023-05-06

【中文标题】css位置问题显示epub文件

【英文标题】：css position issue displaying epub file

【发布时间】：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>

谢谢 蒂姆

【参考方案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;

谢谢大家