如何实现全屏滚动区块布局？尝试width/height 100%等方法无效

核心思路 #

用vh（视口高度）单位直接定义区块高度，比百分比更可靠——百分比高度依赖父元素的明确高度设置，而vh直接基于浏览器视口尺寸，能确保区块占满当前屏幕。同时要清除页面默认的内外边距，避免出现不必要的留白或滚动条。

代码实现 #

CSS 样式 #

/* 清除浏览器默认样式，消除留白 */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止横向滚动 */
}

/* 全屏区块基础样式 */
.full-screen-section {
  min-height: 100vh; /* 强制占满当前视口高度 */
  width: 100vw; /* 占满视口宽度 */
  /* 可选：方便内部元素居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 给不同区块设置背景区分 */
.section-1 {
  background-color: #f5f5f5;
}

.section-2 {
  background-color: #e8e8e8;
}

HTML 结构 #

<div class="full-screen-section section-1">
  <h2>第一个全屏区块</h2>
</div>
<div class="full-screen-section section-2">
  <h2>第二个全屏区块</h2>
</div>

为什么之前的100%设置无效？ #

当你给 div 设置height:100%时，它的父元素（html、body）默认没有明确的高度值，导致百分比高度无法继承生效。而100vh是直接绑定浏览器视口高度的单位，不需要依赖父元素的高度设置，能直接实现全屏效果。

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