вертикальное меню Высота дизайна муравья 100%

Добрый день. Я новичок в веб-разработке и не могу разместить меню дизайна муравьев (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
person Michael Fernandes    schedule 16.01.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Попробуйте управлять отдельной таблицей стилей (в моем случае menu.less) и поместите в нее этот код

это должно быть работать

.menu-style {

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

просто попробуйте.

person jayanes    schedule 17.01.2018
comment
работал отлично. Я только что добавил тег по id. #full {высота: 100vh; } Спасибо! - person Michael Fernandes; 17.01.2018
comment
@MichaelFernandes, если кто-то предоставит ответ, который помог вам, отметьте его как правильный и добавьте балл :) - person Rumid; 24.01.2018

arrow_upward
0
arrow_downward

Вы можете использовать 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>);
person iugo    schedule 18.01.2018