Question

我有一个使用display:flex的第三方组件。就其顶部位置而言，它的行为正确，但是我希望组件的底部固定在浏览器窗口的底部。

const App = () => (
  <div>
    <Menu fixed="top" inverted>
      <Container>
        <Menu.Item as="a" header>
          Navbar
        </Menu.Item>
        <Menu.Item as="a">Home</Menu.Item>
      </Container>
    </Menu>

    <div style={{ position: "fixed", top: "100px" }}>
      <Header as="h1">Dynamic Height Content</Header>

      <TextArea placeholder="This container height may grow or shrink based on content." />
      <Segment style={{ backgroundColor: "red" }}>
        <Grid>
          This 3rd party component which uses display:flex should have top just
          below above component, bottom fixed to browser window bottom (scales
          with window resize).
        </Grid>
      </Segment>
    </div>
  </div>
);

render(<App />, document.getElementById("root"));

我尝试将组件放在顶部和底部固定的div中，使用此div的ref来获取高度并导出flex组件的高度，但是ref的高度不会更新调整窗口大小，仅在重新加载浏览器时使用。

我该如何实现自己的目标？

Answer 1

我们可以做这样的事情，但这通常不是一个好的编码实践（没有足够的声誉来发表评论）

<Segment style={{ backgroundColor: "red", height: "100vh" }}>

Answer 2

实际的HTML输出是：

<div style="position: fixed; top: 100px; bottom: 0px;">
  ...
  <div class="ui segment" style="background-color: red;">
    <div class="ui grid" style="height: 100%;">This 3rd party component which uses display:flex should have top just below above component, bottom fixed to browser window bottom (scales with window resize).</div>
  </div>
</div>

由于您的<div class="ui segment">没有身高，因此给<div class="ui grid">赋予100%的高度是无济于事的，因为它只是父级的100%。您需要将height: 100%添加到<div class="ui segment">或<Segment />中，以便它可以填充由包装div的高度设置的空间。

<div style={{ position: "fixed", top: "100px", bottom: "0px" }}>
  <Header as="h1">Dynamic Height Content</Header>

  <TextArea placeholder="This container height may grow or shrink based on content." />
  <Segment style={{ backgroundColor: "red", height: "100%" }}>
    <Grid>
      This 3rd party component which uses display:flex should have top just
      below above component, bottom fixed to browser window bottom (scales
      with window resize).
    </Grid>
  </Segment>
</div>

如何使flex组件的底部固定到浏览器底部，但顶部位置动态

2 个答案: