为什么身高= 100％不起作用？ [英] Why height=100% doesn't work?

问题描述

我使用占用所有可用空间的第三方组件，即 width = 100％和 height = 100％。我无法控制它。

我试图使它符合以下布局，但它的 height = 100％不起作用（我期望第三方组件占用所有绿色空间）。

为什么？你将如何解决这个问题？

  .container {display：flex; flex-direction：列;宽度：200px; height：100px;}。header {display：flex; background-color：rgba（255，0，0，0.5）;}。content {flex-grow：1; background-color：rgba（0,255,0,0.5）;}。third-party-component {height：100％;宽度：100％; background-color：rgba（0，0，255，0.5）;}  

 < div class =container> < div class =header>标题< / div> < div class =content> < div class =third-party-component>第三方组件< / div> < / div>< / div>  

解决方案

通常，对于使用 height 中的百分比来获取父级高度的元素，父级需要一个高于 auto 或绝对定位 a>或 height 将被计算为 auto 。

基于这两个选项，正如您在评论中提到的，您自己的标题是高度动态的，您将得到绝对定位。

将绝对值添加到内容中，它将被取出并停止表现为正常流动的Flex项目，这是个好消息，可以将包装设置为绝对值。 / p>

堆栈片段

.container {display：flex; flex-direction：列;宽度：200px; height：100px;}。header {display：flex; background-color：rgba（255，0，0，0.5）;}。content {position：relative; / *添加* / flex-grow：1; background-color：rgba（0，255，0，0.5）;}。wrapper {position：absolute; / *添加* /左：0; / *添加* / top：0; / *添加* /右：0; / *添加* /底部：0; / *添加* /}。第三方组件{height：100％;宽度：100％; background-color：rgba（0，0，255，0.5）;}

 < div class =container> < div class =header>标题< / div> < div class =content> < div class =wrapper> < div class =third-party-component>第三方组件< / div> < / DIV> < / div>< / div>  

$ b

---

另一种选择是更新Flexbox属性，使用 flex：1 1 100给 content 一个高度％并且给头 flex-shrink：0; 所以它不收缩作为内容得到了100％）。

这可能不适用于Safari，因为我知道它有问题当高度属性未设置时，尽管现在无法测试，因为我无法访问Safari。

< pre class =snippet-code-css lang-css prettyprint-override> .container {display：flex; flex-direction：列;宽度：200px; height：100px;}。header {display：flex; flex-shrink：0; background-color：rgba（255，0，0，0.5）;}。content {flex：1 1 100％; background-color：rgba（0,255,0,0.5）;}。third-party-component {height：100％;宽度：100％; background-color：rgba（0，0，255，0.5）;}

 < div class =container> < div class =header>标题< / div> < div class =content> < div class =third-party-component>第三方组件< / div> < / div>< / div>  

I use a third-party component that occupies all the available space, i.e. width=100% and height=100%. I don't have control over it.

I'm trying to fit it in the following layout, but its height=100% doesn't work (I expect the third-party component to occupy all the green space).

Why? How would you fix that?

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  flex-grow: 1;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

解决方案

In general, for an element using percent on height to pick up its parent's height, the parent need a height other than auto or being positioned absolute, or the height will be computed as auto.

Based on those 2 options, and as you mentioned in a comment, your own header is dynamic in height, you are left with absolute positioning.

The problem with adding absolute to the content, it will be taken out of flow and stop behaving as a normal flowed flex item, the good news, one can add a wrapper set to absolute.

Stack snippet

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  position: relative;                               /*  added  */
  flex-grow: 1;
  background-color: rgba(0, 255, 0, 0.5);
}

.wrapper {
  position: absolute;                               /*  added  */
  left: 0;                                          /*  added  */
  top: 0;                                           /*  added  */
  right: 0;                                         /*  added  */
  bottom: 0;                                        /*  added  */
}

.third-party-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="wrapper">
      <div class="third-party-component">
       Third party component
      </div>
    </div>
  </div>
</div>

---

Another option could be to update the Flexbox properties, to give the content a height, using flex: 1 1 100% and give header flex-shrink: 0; so it doesn't shrink (as content got 100%).

This might not work on Safari though, as I know it have had issues when the height property is not set, though can't test that now as I don't have access to Safari.

.container {
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 100px;
}

.header {
  display: flex;
  flex-shrink: 0;
  background-color: rgba(255, 0, 0, 0.5);
}

.content {
  flex: 1 1 100%;
  background-color: rgba(0, 255, 0, 0.5);
}

.third-party-component {
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.5);
}

<div class="container">
  <div class="header">Header</div>
  <div class="content">
    <div class="third-party-component">
      Third party component
    </div>
  </div>
</div>

这篇关于为什么身高= 100％不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！