Question

嗨，您能告诉我为什么它在材料设计中没有达到100％的高度吗？这是我的代码 https://codesandbox.io/s/m34pw4km2x

 toolbar__logo: {
    backgroundColor: "#db3131",
    width: "250px",
    height: "100%"
  }

反应码

<Fragment>
        <AppBar position="static" className={classes.mainHeader}>
          <Toolbar className={classes.toolbar}>
            <div className={classes.toolbar__logo}>a</div>
            <div>b</div>
            <div>c</div>
          </Toolbar>
        </AppBar>
      </Fragment>

预期代码

“文本a”将覆盖父级div的整个高度

Answer 1

高度：“ 100％”不适用于相对/静态/绝对定位的元素。但是它将在固定元素上工作。

height: "100%"
position: fixed;

如果您不希望将其固定在另一个位置，则可以使用视图高度（vh）：

height: 100vh

Answer 2

之所以没有达到100％的高度，是因为它不是父元素。只有在%中定义了父元素的height时，子元素px中的高度才有效。您可以通过在index.js中添加toolbar的高度来进行检查：

toolbar: {
padding: 0,
height: "200px"
}

类似地，如果您想要toolbar中%的高度，请固定其父对象的高度

Answer 3

由于您使用的是flex属性，因此需要将align-self: stretch;设置为子元素。更新了"alignSelf"属性的css值。

toolbar__logo: {
  backgroundColor: "#db3131",
  alignSelf: stretch;
}

Answer 4

toolbar__logo: {
    width: 250px;
    height: 100%;
    background-color: #db3131;
    align-self: stretch;
}

请使用此代码。希望对您有用。像@Abhishek Anand这样的解决方案已经在下面发布。您正在使用flex属性，因此显示给CSS属性align-self：stretch;到子元素

为什么在材料设计中不采用100％的高度？

4 个答案: