将子 div 的高度扩展到其父 div 的高度

Question

我的网页结构如下：

它看起来像这样：

我的link__wrapperCSS如下：

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100%;
}

我的 link__infoContainer 不是扩展到 link__wrapper 高度的 100%。看这里：

这是我的 link__infoContainer 代码：

.link__infoContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: inherit;
  width: 100%;
  position: inherit;
  min-height: 100%;
}

如何让我的 link__infoContainer 与 link__wrapper 的身高相匹配？

Answer 1

首先，确保

html{ box-sizing: border-box;}

其次，检查代码以查看 div.link_wrapper 没有继承边距。如果是这样，将边距设置为 0%

Answer 2

将 .link__wrapper class 更新为：

.link__wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: stretch; /* "stretch" instead of "center" */
  width: 100%;
  min-height: 100%;
}

这会将 .link__wrapper 的子级拉伸到它的高度。

将子 div 的高度扩展到其父 div 的高度

Expand height of child div to the height of its parent div

html

css

height

flexbox