Why do you need this? Could you provide more infomation about your requirement.

There is a example U provided .

In this example the sider is full-height . that's exactly what i want . However , I prefer the Sider Component to be a FIXED component and DO NOT roll-up-down with the page .

So, I do something like this :

.layout-sider {
  position: fixed;
  height: 100vh;
  padding-top: 64px
}

If I don't do anythings else . The Content will be covered by the Sider because the Sider is fixed .
So , I have to give marginLeft to Content Component , I do something like this :

... ...
 siderWidth = {
        collapsed : 80,
        unCollapsed: 160 // I have reset the default with 200 to 160 in webpack less-loader
 }

  collapseHandler(collapsed) {
      this.setState({
        width: collapsed ? siderWidth.collapsed : siderWidth.unCollapsed
      })
  }
... ...

<LayoutSider onCollapse={this.collapseHandler.bind(this)}/>
<Layout style={{marginLeft: this.state.width || siderWidth.unCollapsed}}>
            <Content>
                  {this.renderChildren()}
            </Content>
 </Layout>

It Almost worked ! But the Animation make something wrong . The handler is called at the beginning of Animation . So when the fold-animation is running , the Content Component will cover the Sider Component for a few moment ...

So I have to do some magic code like this ...

collapseHandler(collapsed) {
    setTimeout(() => {
      this.setState({
        width: collapsed ? siderWidth.collapsed : siderWidth.unCollapsed
      })
    },collapsed ? 100 : 0)
  }

No cover anymore BUT white space .... :(

If there is a onCollapsed listener , I will not need setTimer anymore . But the white space still exists.

Is there any other ways graceful ?

@chenshuai2144 is it the exact same thing you want.

yes.
But I hope to solve it by other methods.
declarative style is the best