请问要怎么样才能让组件把整个页面撑满呢？

Question

我参考：
AntD的Layout布局:

import { Layout  } from 'antd'
const { Header, Content, Footer, Sider } = Layout

export default function CompFourPanelBase() {
  return <>
    <Layout>
      <Header>header</Header>
      <Layout>
        <Sider>left sidebar</Sider>
        <Content style={{ height: 1000}}>main content</Content>
        <Sider>right sidebar</Sider>
      </Layout>
      <Footer>footer</Footer>
    </Layout>
  </>
}

在我的App.tsx中使用：

function App() {
  return (
    <div className="App">
      测试
      <CompFourPanelBase></CompFourPanelBase>

    </div>
  );
}

但是效果为：

请问要怎么样才能让CompFourPanelBase组件把整个页面撑满呢？

Answer 1

1. 100vh 可以将你想要的元素直接变变成一屏。你可以选择是 height 还是 min-height
2. html,body,xxxx {height: 100%} 这样一级一级传递也行

3. position 改为 absolute fixed 之类的，然后

   1. top:0;left:0;right:0;bottom:0;
   2. top:0;height: 100%

上述的方案都可以实现

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 2

首先要确保html、body高度是100%的，如果不是，自然组件也没办法占满空间了。然后非常简单，按照下面的布局方式就能轻松实现你要的效果：

<div class="main">
    <div class="header"></div>
    <div class="container"></div>
</div>

.main{
    display: flex;
    flex-direction: column;
}

.header{
    flex: none;
    height: 100px;
}

.content{
    flex: auto;
    overflow-y: auto;
}

这样的布局就能够保证.header高度固定，.container高度占满剩余的空间，并且在内容超出空间后，在.container内部出现竖向滚动条。