ant design布局中sider怎么自适应高度

Question

如题： ant design布局中Layout.Sider怎么自适应高度

代码如下：

// @flow
import React, { Component } from 'react';
import { Link } from 'react-router';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

export default class App extends Component {
  props: {
    children: HTMLElement
  };

  render() {
    return (
      <Layout>
        <Sider>
          <Menu theme="dark" defaultSelectedKeys={['1']}>
            <Menu.Item key="1"><Link to="/show1">显示菜单1</Link></Menu.Item>
            <Menu.Item key="2"><Link to="/show2">显示菜单2</Link></Menu.Item>
            <Menu.Item key="3"><Link to="/show3">显示菜单3</Link></Menu.Item>
            <Menu.Item key="4"><Link to="/show4">显示菜单4</Link></Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Content style={{ margin: '0 0' }}>
            {this.props.children}
          </Content>
        </Layout>
      </Layout>
    );
  }
}

Answer 1

html,body,#root{
        width: 100%;
        height: 100%;
    }
    .ant-layout{
        height: 100%;
    }

Answer 2

写了这个样式还是没有效果