我怎样才能让一个Flex组件已经底部固定在浏览器底部，但顶部位置动态

Question

我有使用display:flex第三方组件。它正确地表现在它的顶部位置方面，但我想固定在浏览器窗口的底部组件的底部。

https://codesandbox.io/s/18ox21zqm4

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来获得高度和导出Flex组件的高度应该是什么，但裁判的高度不与窗口大小调整更新只有在浏览器重新加载。

我该如何去实现我的目标是什么？

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的HIGHT设置的空间。

<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>