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

查看：20
本文介绍了为什么 height=100% 不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我正在尝试使其适合以下布局，但它的 height=100% 不起作用(我希望第三方组件占据所有绿色空间).

为什么?你会如何解决这个问题?

.container {显示:弹性；弹性方向:列；宽度:200px；高度:100px；}.header {显示:弹性；背景颜色:rgba(255, 0, 0, 0.5);}.内容 {弹性增长:1；背景颜色:rgba(0, 255, 0, 0.5);}.第三方组件{高度:100%；宽度:100%；背景颜色:rgba(0, 0, 255, 0.5);}

<div class="header">Header</div><div class="内容"><div class="第三方组件">第三方组件

解决方案

一般来说，对于使用 height 上的百分比的元素来获取其父级的高度，父级需要一个 auto 以外的高度或绝对定位, 否则 height 将被计算为 auto.

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

向content添加absolute的问题，它会被从flow中取出并停止作为一个正常的flowed flex item，好消息，可以添加一个wrapper set为absolute.

堆栈片段

.container {显示:弹性；弹性方向:列；宽度:200px；高度:100px；}.header {显示:弹性；背景颜色:rgba(255, 0, 0, 0.5);}.内容 {位置:相对；/*  添加  */弹性增长:1；背景颜色:rgba(0, 255, 0, 0.5);}.包装{位置:绝对；/*  添加  */左:0；/*  添加  */顶部:0；/*  添加  */右:0；/*  添加  */底部:0；/*  添加  */}.第三方组件{高度:100%；宽度:100%；背景颜色:rgba(0, 0, 255, 0.5);}

<div class="header">Header</div><div class="内容"><div class="wrapper"><div class="第三方组件">第三方组件

<小时>

另一个选择是更新 Flexbox 属性，给 content 一个高度，使用 flex: 1 1 100% 并给 header> flex-shrink: 0; 所以它不会收缩(因为 content 得到 100%).

虽然这可能不适用于 Safari，因为我知道当 height 属性未设置时它会出现问题，但现在无法测试，因为我无法访问 Safari.

.container {显示:弹性；弹性方向:列；宽度:200px；高度:100px；}.header {显示:弹性；弹性收缩:0；背景颜色:rgba(255, 0, 0, 0.5);}.内容 {弹性:1 1 100%；背景颜色:rgba(0, 255, 0, 0.5);}.第三方组件{高度:100%；宽度:100%；背景颜色:rgba(0, 0, 255, 0.5);}

<div class="header">Header</div><div class="内容"><div class="第三方组件">第三方组件

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>

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆