如何让包含子元素的<div>始终适配全屏父级<div>

嘿，我来帮你搞定这个布局问题！要让.child完美撑满全屏的.parent，同时避免出现滚动条，这里有几个靠谱的CSS方案，完全符合你的需求：

方案1：使用Flexbox（推荐） #

Flexbox是处理这类自适应布局最直观的方式，它能让子元素自动填充父容器的可用空间。

首先，我们需要确保.parent确实覆盖整个页面，同时清除页面默认的边距：

/* 重置页面默认样式，避免边距影响全屏布局 */
body {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw; /* 占满视口宽度 */
  height: 100vh; /* 占满视口高度 */
  display: flex; /* 启用Flex布局 */
  /* 可选：如果需要子元素居中，可以加上下面两行 */
  /* justify-content: center; */
  /* align-items: center; */
}

.child {
  flex: 1; /* 让子元素填充父容器的所有可用空间 */
  /* 可选：添加内边距避免内容贴边 */
  padding: 1rem;
  box-sizing: border-box; /* 确保内边距不会撑开元素宽度/高度 */
}

/* 处理内部元素，防止它们撑破.child */
.child img {
  max-width: 100%;
  max-height: 60%; /* 根据需求调整，确保图片不会超出容器 */
  object-fit: contain; /* 保持图片比例，同时适配容器 */
}

.child p {
  overflow-wrap: break-word; /* 长文本自动换行 */
}

方案2：使用Grid布局 #

Grid同样能轻松实现这个效果，语法也很简洁：

body {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100vw;
  height: 100vh;
  display: grid; /* 启用Grid布局 */
}

.child {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1rem;
}

/* 同样需要处理内部元素，避免溢出 */
.child img {
  max-width: 100%;
  max-height: 60%;
  object-fit: contain;
}

关键注意点 #

• box-sizing: border-box：这个属性非常重要，它能让元素的内边距和边框不会额外增加元素的宽度/高度，确保.child的尺寸严格适配.parent。
• 内部元素处理：如果.child里的图片、文本等内容本身尺寸过大，一定要限制它们的最大宽高，或者用object-fit（针对图片）、overflow-wrap（针对文本）来处理，否则可能会撑破.child导致滚动条出现。
• 避免height: 100%陷阱：如果不用Flex/Grid，直接给.child设置height: 100%，需要确保.parent的高度是明确的（比如我们这里用100vh），否则100%会失效。

用上面的方案，.child就能始终完美覆盖全屏的.parent，而且不会出现滚动条，完全满足你的需求！

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