高度取决于其他组件的高度 React CSS [重复]答案

【问题标题】：Height depends on the height of the other component React CSS [duplicate]高度取决于其他组件的高度 React CSS [重复]
【发布时间】：2021-12-02 15:57:47
【问题描述】：

我尝试制作一个如下所示的组件。红色的 div 有一个常量height: 70px;，绿色的有height: 50px; 和max-height: 150px;，蓝色的需要有height 的剩余空间。我尝试过这样的事情：

const input = useRef(null);
return (
<Wrapper>
    <TopBar />
    <BottomPanel inputHeight={input?.current?.style?.height}/>
    <WritePanel ref={input}/>
</Wrapper>
);

const Wrapper = styled.div`
  height: 100%;
`;

const BottomPanel = styled.div`
  height: ${({ inputHeight }) =>
    inputHeight ? `calc(100% - 70px - ${inputHeight})` : `calc(100% - 120px)`};
`;

const WritePanel = styled.div`
  min-height: 50px;
  max-height: 150px;
`;

但它不起作用。我怎样才能正确地做到这一点？我正在使用React 和```styled-components``。

【问题讨论】：

<BottomPanel inputWidth={input?.current?.style?.width}/> 你不应该超过WritePanel 的高度吗？？
是的，这是一个小错误，但它仍然不起作用

标签： html css reactjs styled-components

【解决方案1】：

你试过 flexbox 吗？通过使用 flex grow，您可以做到这一点。

.wrapper {
  display: flex;
  flex-direction: column;
  height: 500px;
  width: 200px;
}

.top-bar {
  height: 70px;
  background: red;
}

.bottom-panel {
  flex-grow: 1;
  background: blue;
}

.write-panel {
  min-height: 50px;
  max-height: 150px;
  background: green;
  padding: 10px;
}

<div class="wrapper">
  <div class="top-bar"></div>
  <div class="bottom-panel"></div>
  <div class="write-panel"></div>
</div>

【讨论】：

是的，谢谢！