无法在 React 中使用百分比设置高度

Question

我想在 react 中构建一个闹钟应用程序，但我遇到了一个奇怪的问题。 我有一个包含所有警报组件的容器，我无法以百分比为它们设置高度。 有没有办法以百分比传递高度，而不是 px/vh？

容器

function Container() {
return (
    <div className="container">
        <Alarm />
        <Alarm />
        <Alarm />
    </div>
)

}

容器样式

.container{
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
}

Alarm.js

function Alarm() {

    return (
        <div className="alarm">
            quack quack
        </div>
    )
}

闹钟样式

.alarm{
  width: 100%;
  height: 20%;

  &:not(:first-child){
    margin-top: 50px;
  }
}

Answer 1

要使百分比高度起作用，父母的高度应该是可确定的，但在您的情况下，.container 的高度取决于它的孩子。 要使.alarm 组件的百分比高度起作用，请为.container 元素提供高度

function Alarm() {

  return ( 
    <div className = "alarm" >
      quack quack
    </div>
  )
}

function Container() {
  return (
    <div className = "container" >
      <Alarm />
      <Alarm />
      <Alarm />
    </div>
  )
}

ReactDOM.render( <Container /> , document.querySelector('#root'))

.app {
  height: 300px;
  width: 500px;
}

.container {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  background-color: #ffff0088; /* only to visually distinguish */
  height: 300px; /* <-- Changed */
}

.alarm {
  width: 100%;
  height: 20%;
  background-color: #0000ff88; /* only to visually distinguish */
}

.alarm:not(:first-child) {
  margin-top: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

Answer 2

我认为他们可能是一些原因造成的

1. 父容器的样式（包含所有内容）

• 你可以给它一个position of relative和一个高度在```px/vh`` 然后 100% 就可以了。