почему он не принимает 100% высоты в дизайне материала?

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

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

Используйте этот код, пожалуйста.надеюсь, это будет полезно для вас.Такое же решение, как @Abhishek Anand, уже выложено ниже.вы используете свойство flex, поэтому вы показываете, что передаете свойство CSS align-self: stretch;дочернему элементу

Answer 2

Причина, по которой он не принимает 100% высоты, заключается в том, что он не является родительским элементом.Высота в % для дочернего элемента будет работать, только если height родительского элемента определено в px.Вы можете проверить это, добавив высоту для toolbar в ваш index.js:

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

Аналогично, если вы хотите высоту toolbar в %, зафиксируйте высоту для ее родителя

Answer 3

Поскольку вы используете свойство flex, вам нужно установить align-self: stretch; для дочернего элемента.обновил значение css свойства "alignSelf".

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

Answer 4

высота: «100%» не работает на относительных / статических / абсолютных позиционируемых элементах.Однако он будет работать с фиксированными элементами.

height: "100%"
position: fixed;

Еще один вариант, если вы не хотите, чтобы это было фиксированное положение, это использовать высоту просмотра (vh):

height: 100vh