Fit to the Parent Height in CSS

如何在 CSS 中使元素的高度适应其父元素

作为现代 Web 开发的最前沿，创建美观且功能一致的页面布局，这些布局是当今现代网页的自然延伸。这通常发生在 Web 开发人员需要确保子元素能够很好地适应其父元素并与父元素具有相同高度的情况下。这可以在许多场景中实现，例如，为了与内容区域相邻的侧边栏保持平衡，匹配导航栏的高度，或者通过调整容器内图像的大小来创建有序的空间。能够准确地实现这一点将真正地证明一个连贯且响应迅速的设计，它不仅直观，而且还能为用户增加价值。

关于如何根据父元素大小进行设置的语法学习，会涉及许多最终能帮助你专业进行风格设置的概念和技术。问题的基础是 CSS 盒子模型，这是一个即使对于经验丰富的 Web 开发人员来说，也难以一目了然的硬性原则。在 CSS 中，盒子模型是用于确定元素尺寸的机制，包括内边距 (padding)、外边距 (margin)、边框 (border) 和内容框 (content boxes)。定义元素总高度的度量标准是这些属性的总和，未能正确管理它们可能导致布局渲染出现不期望的结果。因此，在更改高度之前，应首先奠定对盒子模型理解的基础。

从视口缩放到 Flexbox 的出现，有多种 CSS 工具可以处理这种布局问题，每种都有其独特的优点和应用。其中，Flexbox 和 Grid 布局都非常出色，而 Grid 布局尤其擅长轻松地执行复杂的对齐任务。Flexbox 是一种较新的布局模块（由 W3C 于 2012 年正式推出），它提供了一种灵活的机制来在容器内分发和对齐项目，与旧方法相比，为 Web 开发人员节省了大量时间和精力。它非常适合所谓的“一维布局”，即盒子需要精确地排列成一行或一列。然而，CSS Grid 布局包含由网格项的行和列组成的二维网格，这通常更方便，并有助于一次性管理行和列。这些方法极大地简化了使子元素遵循其父元素高度规则的过程。

此外，Flexbox 和 Grid 并不是用于高度对齐的唯一方法。绝对定位也是可以实现此目的的另一种方法。通过将父元素设置为 `position: absolute`，子元素可以根据需要设置其顶部和底部位置；子元素将与父元素的大小一致。然而，这种方法虽然有效，但应谨慎使用，并考虑父元素和溢出问题可能带来的副作用。

另一种技术是应用 `display` 属性并将其值设置为 `table` 和 `table-cell`。此技术天然地提供了与 HTML 表格类似的功能，其中表格单元格可以扩展到行的高度。尽管在 Flexbox/Grid 时代这可能被认为是异类，但当您需要“类似表格”的行为但又不使用实际的表格标记时，它是一种便捷的技术。

使用 Sass 中的视口单位（如 `vh`（视口高度））来设置元素的高度，提供了一种简单而非常有效的方法来处理相对于视口的高度因素。为了实现这一点，开发人员使用视口单位来定义高度。因此，当每个浏览器窗口调整大小时，元素都会响应式地调整大小，在所有平台上保持网页的相同外观。当父元素与视口大小匹配时，此技术可以应用，并且还可以将子元素缩放到视口。

方法 1：使用 Flexbox 使元素适应父元素的高度

Flexbox，也称为 Flexbox 布局，是一项相对较新的 CSS 功能，旨在帮助开发人员更好地在容器中定位元素。它的主要优势在于它沿着单个维度（纵向或横向）进行分布。这意味着 Flexbox 是实现主要目标（即将子元素的大小设置为父元素的高度）的次优方法。在本节中，我们将了解 Flexbox 如何帮助子元素占据其父元素的全部高度，并提供一些实际示例和技巧。

设置基本结构

要开始使用 Flexbox，您需要指定一个父元素，可能还有几个子元素。这是一个简单的 HTML 结构

`.flex-container` 将用作父类，`.child` 类将是我们要适应父元素高度的 flex 项目。

应用 Flexbox 属性

首先，您将学习如何在 `.parent` 元素内使用 Flexbox 属性来支持 Flex 属性。方法如下：

通过将 `display` 属性设置为 `flex`，我们在显示 Flexbox 时。将其设置为父级的 flex 容器。然而，仅仅有市场机会并不能保证 `.child` 元素会像父元素一样高。要做到这一点，您需要修改子元素并将 `flex` 替换为 `flex-grow`。

`flex: 1;` 中的 `1` 是 `flex-grow: 1` 的简写，其值为 `1`。这是浏览器用来推断 `.child` 元素如何处理 `.parent` 元素中剩余空间的指令，即 `.child` 元素需要扩展以填充 `.parent` 元素所占据的任何剩余空间。

理解 flex 属性

为了更好地理解 Flexbox 如何工作，让我们分解其组件：

• flex-grow: 此属性描述 flex 项目是否可以增大以填充父元素可用空间。在我们的示例中，`flex-grow: 2` 充当增长前的元素，并决定子元素将增长以填充父级中仍留有的任何空间。
• flex-shrink: 此属性允许项目仅在必要时调整大小。`flex-shrink: 1` 创建了一个约束，即如果直接子元素的内容不适合分配的空间，子元素将缩小。
• flex-basis: 此属性指定 flex 项目的初始主尺寸，然后根据 `flex-grow` 和 `flex-shrink` 的比例将可用空间分配给 flex 项目。通过将 `flex-basis: 0` 设置为零，我们从子元素的高度为零开始，然后需要将其高度设置为父元素以使子元素增长到所需的高度。

处理边界情况

虽然 Flexbox 很强大，但也有一些需要注意的边缘情况：

• 溢出问题：必须确保子元素的高度包含在其父元素内，并防止溢出情况。如果需要，请使用 `overflow: hidden`、`overflow-y: auto` 或其他溢出管理方法。
• 浏览器兼容性：这意味着最新的浏览器支持 Flexbox，但某些属性可能并不总是被特定浏览器或旧版浏览器支持。
• 嵌套 Flex 容器：需要提醒的是，每个 flex 容器及其项目都可以在嵌套容器内拥有自己的 flex 属性。由于多重集成，因此很容易出现错误，因此适当的预生产阶段规划和测试至关重要。

另一种有用的技术是使用 Flexbox 来模拟行跨度，方法是使子元素匹配父元素的高度。那些理解并使用 `flex`、`flex-grow`、`flex-shrink` 和 `flex-basis` 等属性的人，实际上可以创建更具适应性的布局。当只有一个子元素或有多个子元素参与设计时，Flexbox 应被用来实现网站部分外观的最佳功能和同步。当你深入研究 Flexbox 的好处并尝试使用更多它的功能时，你会惊讶于内容在界面设计中的布局方式。

方法 2：使用 Grid 布局使元素适应父元素的高度

CSS Grid 布局是一种新开发的强大模型，可用于在万维网上创建二维布局。虽然 Flexbox 以前用于在一维布局中更好地排列项目，但 Grid 布局具有无缝地将项目排列成行或列的功能，这使其非常适合需要以特定网格方式定位项目的复杂布局。本节重点介绍如何利用 CSS Grid 使子元素占据与其父元素相同的总高度。

设置基本结构

要应用 CSS Grid，您必须首先拥有父元素和一个或多个子元素。这是一个简单的 HTML 结构

`.parent` 将是父类的名称，而 `.grid-container` 将是包含子元素 `.child` 的类，`.child` 类是网格项目，网格将适应以占据父元素的全部高度。

应用 Grid 属性

首先，我们将使用 Grid 属性来：虽然没有提供父元素来启用 Grid 布局，但结果如下：方法如下：

在这种情况下，将 `display` 属性设置为 `grid` 意味着我们将 `.parent` 元素变成了一个网格容器。CSS 属性涉及 `grid` 布局，它能够将父元素排列成一个网格容器。然而，重要的是要理解，`.child` 元素根据父元素的尺寸调整大小没有科学依据，因此在这种情况下，网格行和列应该由开发人员声明。

`grid-template-rows:` 属性创建一个跨越整个高度的单个行，它只能有一个片段行 `.parent` 容器。`fr` 代表“可用空间的分数”，`1fr` 意味着该行应跨越视口宽度中可用的高度分数的数量。

添加多个行和列

在设计网页时，有许多情况您需要多个行和多个列；而这正是 CSS Grid 可以提供帮助的地方。现在，让我们创建一个更复杂的示例，向我们的 Grid 布局添加更多子元素，看看它是如何工作的。

保持上述方程式在此位置，仍有必要整合所有这些，以便子元素占据容器 `.parent` 的一半高度。

通过设置 `grid-template-rows: 1fr 1fr;`，我们定义了网格中的两行，这两行在父容器的垂直维度上占据相等的空间。它还会扩展到其所属行的可用高度。

对齐网格中的项目

CSS Grid 还提供了用于将项目放置在网格内的属性，采用 CSS Grid 布局模型。例如，您可能希望水平和垂直居中子元素的内容。

在这里，`justify-items: center;` 推荐沿水平线居中项目，而 `align-items: center;` 在网格容器中垂直居中它们。利用 `.child` 元素内部的 Flexbox，它们确保其元素的内容也水平居中。

方法 3：使用定位使元素适应父元素的高度

CSS 定位的概念是网页设计中最有用的概念之一，因为它允许轻松控制网页并放置不同的元素。有几种方法可以将子元素定位到其父元素。然而，最推荐的方法是通过相对和绝对定位技术，因为这将使您能够完美地将子元素适应父元素的高度。

这项技术在您有许多行并且需要精细调整它们的位置时特别有效，并且可以在不同的设计任务中使用。在本节中，我们将深入研究一种常用的定位技术，以便将子元素垂直对齐到父元素的高度。

理解 CSS 定位

在我们深入实现之前，了解 CSS 定位的基本知识很重要。

• 相对定位：相对定位是指相对于元素在页面上正常位置（相对于页面上的其他元素流程）进行定位。这会导致其位置具有灵活性，可以将其放置在它通常占据的位置之外，而不会干扰其他元素的位置。
• 绝对定位：绝对定位的元素会从常规文档流中移出，并相对于其最近的已定位祖元素的位置进行定位。它被定义为最近已定位祖元素的位置。

基本设置

让我们从一个简单的 HTML 结构开始：

`.parent` 类将是所选模块及后续模块的容器，而 `.child` 类将用于获取我们将用作容器以使其适应父元素高度的元素。

应用定位

要使 `.child` 元素匹配其 `.parent` 的高度，您需要将 `.parent` 设置为相对定位，并将 `.child` 设置为绝对定位。

以下是发生情况的细分：

• .parent: `position: relative;` 创建子元素的定位上下文。`height: 100vh;` 使父元素全屏，占据视口的全高。
• .child: `position: absolute;` 关键字将子元素从页面布局中移出，并根据最近的已定位父元素（在此情况下为 `.parent`）进行放置。`top: 0;`, `bottom: 0;`, `left: 0;` 和 `right: 0;` 属性使子元素拉伸到父元素的尺寸，从而适应其高度。

处理多个子元素

假设您在同一个父元素中有多个子元素，并且希望每个子元素都适应父元素的高度。在这种情况下，您可以将相同的定位属性应用于每个子元素。如果您在同一个父元素中有多个子元素，并且希望每个子元素都适应父元素的高度，您可以将相同的定位属性应用于每个子元素。

HTML

CSS

但是，这种方法似乎会将每个子元素推到它们完全侵占彼此的地步。要排列它们而不重叠，您需要稍微修改它们的定位。

这使得每个子元素能够增长到父元素高度的一半。

居中内容

有时，人们可能会认为集成在 `.child` 元素中的内容需要同时在水平和垂直轴上居中。这可以通过在子元素中应用 Flexbox 来实现。

这利用了 Flexbox 属性 `justify-content: center;` 和 `align-items: center;` 来居中子元素中的内容。

方法 4：使用视口单位使元素适应父元素的高度

响应式设计被认为是 Web 设计中最基本的功能之一，而 CSS 中的视口单位不仅提供了实用的解决方案，还提供了一个简单的解决方案。有一些特殊的单位，例如 `vw`（视口宽度）和 `vh`（视口高度），它们指的是视口大小的一部分。

当使子元素适应父元素的高度时，视口单位可能很有用：例如，在父元素和子元素都必须能够随着视口大小的变化而缩放的布局中。此方法非常易于应用，并且对于与响应式设计相关的此类情况非常有效。

理解视口单位

在深入实现之前，了解视口单位的工作原理至关重要。

• vh (视口高度): 1 视口高度定义为 1vh，对应于视口高度的 1%。例如，`100vh` 表示“100 视口高度”，意味着它是屏幕上可见空间的 100%。
• vw (视口宽度): 1 vw 代表网页要设计的视口宽度的 1%。例如，指定 `100vw` 意味着您正在设置样式的元素具有当前视口宽度的 100%。
• 借助这些单位，您可以相对于视口进行测量，以便元素能够根据屏幕大小正确调整。

基本设置

让我们从一个基本的 HTML 结构开始：

`.parent` 类将是所有元素的容器，而 `.child` 类将是我们尝试调整高度以适应父元素的元素。

应用视口单位

为了使 `.child` 元素匹配或占据 `.parent` 的高度，我们可以使用 `vh` 单位。另一个是父单位的单位是 `vh` 单位。这是一个简单的例子：

让我们考虑这个例子，其中 `.parent` 的视口高度为 `100vh`；因此，父元素占据了视口中的所有可用高度。`.child` 元素的高度设置为 `100%`，这意味着该元素将占据其父元素尽可能多的高度。

下一步是确定网站布局如何适应不同的屏幕尺寸，这可以通过视口单位来实现。

使用视口单位进行响应式布局

鉴于视口属性解决了将页面缩放到适合屏幕大小的问题，视口单位在设计响应式布局时尤其方便。让我们看一个父元素和子元素随视口动态调整的例子。

HTML

CSS

在此示例中，形容词用于限定名词，它们包括 `.parent` 容器分为三个部分：包括包含公司及其产品信息的标题，包含推荐书籍的内容区域，以及包含指向公司其他网页链接的页脚。

标题和页脚将整个视口高度分成四分之一，每个四分之一为 `10vh`，实际内容占据 `80vh` 的区域。内容区域中的 `.child` 元素的高度属性为 `100%`，这意味着该元素将占据其父元素尽可能多的高度。

`vh` 和 `vw` 等视口单位为子元素适应父元素高度提供了极佳且相当明显的解决方案，这是响应式 Web 设计的目标。此类布局结构应有助于创建始终看起来很棒的页面，这些页面在各种设备上加载，大小不同，但在整体组织和可用性原则上相似。视口单位是现代 Web 设计者的绝佳工具，如果单独使用或与其他 CSS 方法结合使用，可能会非常有帮助。

故障排除提示

我颇为惊讶地发现，为子元素找到合适高度以适应父元素的不同方法可能会遇到问题或表现出奇怪的行为。本节将提供有关您可能遇到的各种方法的潜在问题（也称为 bug）以及修复它们的方法的见解。最后一部分将简要概述本文讨论的所有方法及其各自的优点。

1. 检查样式冲突
   
   • 问题：可能会发生浏览器样式冲突，导致元素以某种奇怪的方式表现。
   • 解决方案：借助浏览器开发工具（如 Google Chrome DevTools）查看已应用的样式，并搜索是否存在任何冲突。请记住，应仅使用所需样式的样式。
2. 确保正确的父子关系
   
   • 问题：我相信，要让子元素获得 100% 的高度，父元素必须具有已定义的高度。
   • 解决方案：确保父元素已分配高度。例如，`height: 100vh;`、`height: 100%;` 或任何固定高度，如 `height: 500px;`）。
3. 检查定位上下文
   
   • 问题：在这里，当设置绝对值时，子元素可能会相对于一个与原始意图不同的父元素进行定位。
   • 解决方案：确保父元素的位置设置为 `relative`，因为这会使父元素充当其绝对定位子元素的容器。
4. 管理溢出问题
   
   • 问题：文本和其他内容可能会超出某个对象的边界，从而导致对齐问题。
   • 解决方案：在处理溢出内容时，建议使用 `overflow: hidden;`、`overflow-y: auto;` 或其他属性来管理流。还应确保高度设置与父元素的高度一致。
5. 考虑 Flexbox 和 Grid 的特殊性
   
   • 问题：由于默认的对齐和大小调整行为，Flexbox 和 Grid 布局可能无法按预期工作。
   • 解决方案：讨论可以应用于相关特定集或指定属性（如 `align-items`、`justify-content`、`align-self` 和 `flex-grow`）的各种属性。在 Grid 中，每次定义 Grid 时，都要使用 `grid-template-rows` 和 `grid-template-columns` 正确定义行和列。
6. 考虑浏览器差异
   
   • 问题：还必须注意，浏览器中的功能和样式可能因浏览器而异。
   • 解决方案：应进行跨浏览器测试，以确定您的布局是否有效满足不同浏览器中客户的需求。适当使用 CSS 前缀或开发 polyfill（如有必要）是提高兼容性的关键步骤。
7. 利用调试工具
   
   • 问题：由于潜在的多种原因，布局问题的根本原因诊断起来颇具挑战性。
   • 解决方案：Firefox 浏览器中的 CSS Grid Inspector 和 Flexbox Inspector，或 Chrome DevTools 中提供的类似视图，在调试 Grid 和 Flexbox 布局时可能非常有用，因为它们有助于显示浏览器如何渲染 CSS 样式。
8. 简化您的 CSS
   
   • 问题：当布局变得复杂和混乱时，它们会开始带来意想不到的问题。
   • 解决方案：通过应用没有带来任何价值的样式来减少和避免混乱的代码，如果可能，使用属性的简写形式。将复杂的规则分解成小的部分，然后让参与者逐步解决不同的问题。

验证 CSS

• 问题：拼写错误或无效的 CSS 可能导致意外行为。
• 解决方案：您可以使用的一些标准工具包括 W3C CSS Validator 来检查您将在实际网站中使用的 CSS 的有效性，并检查语法错误。