无需绝对定位实现书本翻页效果，让相对定位div适配内容

核心思路 #

由于所有书页采用绝对定位堆叠，父容器.book无法自动感知子元素的内容高度，因此需要通过JavaScript计算所有书页（正面+背面）的内容最大高度，再统一设置给.book和所有.paper，同时调整CSS让页面元素自适应该高度。

修改步骤 #

1. 调整CSS基础样式 #

移除.book的固定高度限制，让页面元素的高度能跟随内容或JS设置的值自适应：

/* Book */
.book {
  position: relative;
  width: 350px;
  /* 移除固定height */
  transition: transform 3.5s;
}

.paper {
  position: absolute;
  width: 100%;
  /* 后续由JS动态设置height */
  top: 0;
  left: 0;
  perspective: 1500px;
  cursor: pointer;
}

.front,
.back {
  background-color: white;
  position: absolute;
  width: 100%;
  height: 100%; /* 继承父元素.paper的高度 */
  top: 0;
  left: 0;
  transform-origin: left;
  transition: transform 3.5s;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto; /* 可选：内容过长时允许内部滚动 */
}

.front-content,
.back-content {
  width: 100%;
  padding: 20px; /* 添加内边距避免内容贴边 */
  /* 移除固定height，让内容自然撑开 */
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

2. 添加JS计算最大高度逻辑 #

在翻页初始化前，先计算所有书页内容的最大高度，统一设置给容器和所有书页：

// 计算所有页面内容的最大高度
function setMaxPageHeight() {
  const book = document.getElementById('book');
  const pages = document.querySelectorAll('.paper');
  let maxHeight = 0;

  // 遍历所有页面，对比正面和背面的内容高度
  pages.forEach(page => {
    const frontContent = page.querySelector('.front-content');
    const backContent = page.querySelector('.back-content');
    const frontHeight = frontContent.scrollHeight;
    const backHeight = backContent.scrollHeight;
    const pageMax = Math.max(frontHeight, backHeight);
    
    if (pageMax > maxHeight) {
      maxHeight = pageMax;
    }
  });

  // 统一设置容器和所有书页的高度
  book.style.height = `${maxHeight}px`;
  pages.forEach(page => {
    page.style.height = `${maxHeight}px`;
  });
}

// 先设置高度，再初始化翻页逻辑
setMaxPageHeight();
let pages = document.getElementsByClassName("paper");
setup(pages);

// 原翻页逻辑保持不变
function setup(elements) {
  for (let i = 0; i < elements.length; i++) {
    let previous = i === 0 ? null : elements[i - 1];
    let element = elements[i];
    let next = i === elements.length - 1 ? null : elements[i + 1];

    element.addEventListener('click', () => {
      element.classList.toggle('flipped');
      if (element.classList.contains("flipped")) {
        if (next !== null) {
          next.style.zIndex++;
        }
        element.style.zIndex = i + 1;
      } else {
        element.style.zIndex = elements.length - i;
      }
    });
  }
}

3. 效果说明 #

• 所有书页高度自动匹配内容最多的页面，避免内容溢出
• 翻页交互不受影响，因为所有页面高度统一，绝对定位的堆叠逻辑正常
• 可选的overflow-y: auto可在单页内容过长时，让页面内部滚动，避免整体高度过高

完整代码示例 #

<div id="book" class="book">
  <div id="p1" class="paper">
    <div class="front">
      <div id="f1" class="front-content">
        <h1>The Roman Empire was the post-Republican state of ancient Rome. It included territory around the Mediterranean in Europe, North Africa, and Western Asia, and was ruled by emperors. The adoption of Christianity as the state church in 380 and the fall of the Western Roman Empire conventionally marks the end of classical antiquity and the beginning of the Middle Ages.</h1>
      </div>
    </div>
    <div class="back">
      <div id="b1" class="back-content">
        <h1>The first two centuries of the Empire saw a period of unprecedented stability and prosperity known as the Pax Romana (lit. 'Roman Peace'). </h1>
      </div>
    </div>
  </div>
  <div id="p2" class="paper">
    <div class="front">
      <div id="f2" class="front-content">
        <h1>Due to the Empire's extent and endurance, its institutions and culture had a lasting influence on the development of language, religion, art, architecture, literature, philosophy, law, and forms of government in its territories. Latin evolved into the Romance languages, while Medieval Greek became the language of the East.</h1>
      </div>
    </div>
    <div class="back">
      <div id="b2" class="back-content">
        <h1>The rediscovery of classical science and technology (which formed the basis for Islamic science) in medieval Europe led to the Scientific Renaissance and Scientific Revolution. Many modern legal systems, such as the Napoleonic Code, descend from Roman law, while Rome's republican institutions have influenced the Italian city-state republics of the medieval period, the early United States, and modern democratic republics.</h1>
      </div>
    </div>
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: #333333;
}

/* Book */
.book {
  position: relative;
  width: 350px;
  transition: transform 3.5s;
}

.paper {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  perspective: 1500px;
  cursor: pointer;
}

.front,
.back {
  background-color: white;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: transform 3.5s;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
}

.front {
  z-index: 1;
  backface-visibility: hidden;
  border-left: 3px solid powderblue;
  background-color: #b3ffff;
}

.back {
  z-index: 0;
  background-color: #ffd699;
}

.front-content,
.back-content {
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.back-content {
  transform: rotateY(180deg)
}

/* Paper flip effect */
.flipped .front,
.flipped .back {
  transform: rotateY(-180deg);
}

/* Controller Buttons */
button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin: 10px;
  transition: transform 0.5s;
}

button:focus {
  outline: none;
}

button:hover i {
  color: #636363;
}

i {
  font-size: 50px;
  color: gray;
}

/* Paper stack order */
#p1 {
  z-index: 3;
}

#p2 {
  z-index: 2;
}

#p3 {
  z-index: 1;
}

// 计算所有页面内容的最大高度
function setMaxPageHeight() {
  const book = document.getElementById('book');
  const pages = document.querySelectorAll('.paper');
  let maxHeight = 0;

  pages.forEach(page => {
    const frontContent = page.querySelector('.front-content');
    const backContent = page.querySelector('.back-content');
    const frontHeight = frontContent.scrollHeight;
    const backHeight = backContent.scrollHeight;
    const pageMax = Math.max(frontHeight, backHeight);
    if (pageMax > maxHeight) {
      maxHeight = pageMax;
    }
  });

  book.style.height = `${maxHeight}px`;
  pages.forEach(page => {
    page.style.height = `${maxHeight}px`;
  });
}

setMaxPageHeight();
let pages = document.getElementsByClassName("paper");
setup(pages);

function setup(elements) {
  for (let i = 0; i < elements.length; i++) {
    let previous = i === 0 ? null : elements[i - 1];
    let element = elements[i];
    let next = i === elements.length - 1 ? null : elements[i + 1];

    element.addEventListener('click', () => {
      element.classList.toggle('flipped');
      if (element.classList.contains("flipped")) {
        if (next !== null) {
          next.style.zIndex++;
        }
        element.style.zIndex = i + 1;
      } else {
        element.style.zIndex = elements.length - i;
      }
    });
  }
}

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