垂直 Menu Ant 设计高度 100%答案

【问题标题】：vertical Menu Ant design height 100%垂直 Menu Ant 设计高度 100%
【发布时间】：2018-01-16 19:07:41
【问题描述】：

下午好。我是 Web 开发新手，无法将 ant 设计菜单 (https://ant.design/components/menu/) 放在屏幕高度的 100%。

我尝试将<Layout style = {{height:" 100vh "}}> 放在前面，但没有用。

这是我正在使用的代码

。 . . . .

import React from 'react'
import { Layout, Menu, Breadcrumb, Icon, Button } from 'antd';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

export class SideMenu extends React.Component {

  constructor(props){
    super(props)
    this.state = {collapsed: false}
  }

  toggleCollapsed (){
     this.setState({
       collapsed: !this.state.collapsed
     })
  }

  render() {
    return (
      <div style={{ width: 256 }}>
        <Menu
          defaultSelectedKeys={[]}
          defaultOpenKeys={[]}
          mode="inline"
          theme="light"
          inlineCollapsed={this.state.collapsed}
        >
          <Menu.Item key="0">
            <div onClick={this.toggleCollapsed.bind(this)}>
              <Icon type={this.state.collapsed ? 'menu-unfold' : 'menufold'}/>
            </div>
          </Menu.Item>    
          ...    
          <Menu.Item key="5">
            <Icon type="rocket" />
            <span>Funções</span>
          </Menu.Item>
        </Menu>
      </div>
    );
  }
}

感谢您的帮助。

【问题讨论】：

标签： javascript html antd

【解决方案1】：

尝试管理单独的样式表（在我的情况下为 menu.less）并将其放入此代码

应该可以了

.menu-style {

height: 100vh;
width: 200px;
position: fixed;
}

试试吧。

【讨论】：

完美运行。我只是通过 id 添加了标签。 #full { 高度：100vh; } 谢谢！
@MichaelFernandes 如果有人提供了对您有帮助的答案，请将其标记为正确并加分:)

【解决方案2】：

您可以使用ref 获取您想要的DOM 参考高度。然后使用某些组件的高度。

function refIt(theDOM) {
  const height = theDOM.clientHeight;
  this.setState({ height });
}

return (<div ref={theDOM => refIt(theDOM)}>
  <div height={this.state.height}>
  </div>
</div>);

【讨论】：