相对定位的div高度在没有设置height: 100%之前是100%。

Question

相对定位的div高度在没有设置height: 100%之前是100%。

3

安装设置

.container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex: 1 1;
  padding: 28px;
  width: 100%;
  background-color: #eee;
}

.bar {
  position: relative;
  width: 5px;
  background-color: blue;
}

<div class="container">
  <div class="bar"></div>
  <div>
    lskdjf
  </div>
</div>

请注意，蓝色的条达到容器的最大高度，除去填充部分。

但是，如果我在 .bar 类中添加 height: 100%，则高度将消失。

.bar {
  position: relative;
  width: 5px;
  background-color: blue;
  height: 100%;
}

问题

我想实际将高度设置为100％会使浏览器混淆，因为父元素实际上没有设置高度，但是预先设置高度为100％的属性允许高度达到100％吗？考虑到这实际上是我的目标，只是不指定100％是否“正确”，或者是否有更好的方法确保.bar元素达到完整高度？

- wheresmycookie

由于其内部没有内容，因此该栏消失了。该栏应该具体做什么？ - Elman Huseynov

1

jsFiddle对我来说被封锁了。请在你的问题中放置一个[mcve]。 - j08691

@ElmanHuseynov，实际上该工具栏内部有一个绝对定位的可点击面板，但它似乎与手头的问题无关。 - wheresmycookie

@j08691，看起来有人比我先完成了这个。谢谢Azametzin，我会在以后的问题中注意这一点。 - wheresmycookie

1

这是因为高度是相对于 div 内部元素的高度而言的。 - Stanley

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

这是由于flexbox容器应用了默认的stretch对齐方式，使得所有元素都被拉伸以适应其父容器的高度。

.container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex: 1 1;
  padding: 28px;
  width: 100%;
  background-color: #eee;
}

.bar {
  position: relative;
  width: 5px;
  background-color: blue;
}

<div class="container">
  <div class="bar"></div>
  <div>
    lskdjf
  </div>
</div>

如果弹性项的交叉轴尺寸属性计算为自动，并且交叉轴两侧的边距都不是自动，则伸展弹性项。它的使用值是使该项的边框区域的交叉轴尺寸尽可能接近于行的相同大小所必需的长度，同时仍然遵守min-height/min-width/max-height/max-width所施加的约束条件。^ref

如果更改对齐方式，则不会再发生这种情况

.container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex: 1 1;
  padding: 28px;
  width: 100%;
  background-color: #eee;
  align-items:flex-start;
}

.bar {
  position: relative;
  width: 5px;
  background-color: blue;
}

<div class="container">
  <div class="bar"></div>
  <div>
    lskdjf
  </div>
</div>

如果您设置了任何高度值，则不再考虑上面的规范，因此拉伸将不再适用，您将遇到百分比高度问题，这将使高度降至“自动”，因为父元素的高度未明确设置。

引用：指定百分比高度。百分比是相对于生成框所包含的块的高度计算的。如果未明确指定包含块的高度（即它取决于内容高度），并且此元素没有绝对定位，则该值计算为“auto”。ref