Chrome及Edge浏览器中实现div容器后强制分页的问题

你用的page-break-*属性是给打印场景设计的，不是网页滚动时的分页效果，所以Chrome和Edge里不会生效。要实现全屏介绍页、滚动后显示后续内容的需求，得用视口高度单位（vh）来控制容器尺寸，具体方案如下：

修改后的CSS代码 #

/* 重置默认样式，避免浏览器自带边距干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让介绍页占满整个视口高度 */
.pagebreak {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 可在这里添加背景样式，比如：background: #f0f0f0; */
}

/* 导航栏基础样式，按需调整 */
.nav {
  padding: 1.2rem;
}

.navitem {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navitem a {
  text-decoration: none;
  color: #333;
}

/* 让标题区域垂直水平居中 */
.container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered {
  text-align: center;
}

/* 后续内容区域，自动排在介绍页下方 */
.uebersicht {
  padding: 2rem;
}

#webprogrammierung, #verteilteSysteme {
  margin-bottom: 2.5rem;
}

方案说明 #

• 100vh确保.pagebreak容器高度等于当前设备的视口高度，无论屏幕尺寸多大，都能占满一整页
• Flex布局让标题区域自动居中，同时保留导航栏在顶部的布局
• 后续的.uebersicht会自动排在全屏介绍页下方，滚动页面就能看到对应内容

你的原HTML结构无需修改，直接搭配上述CSS即可实现需求：页面加载时显示全屏介绍页，滚动后进入导航对应的内容区域。

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