2017-10-14 5 views
0

CSS를 적용하여 메뉴 높이를 창 높이와 같게 설정하려고합니다. 페이지의 요소가 페이지 길이에 대해 수직으로 증가하면 메뉴 높이도 증가해야합니다. 나는 "height : 100 %"를 사용했다. & 또한 스타일에서 "height : 100vh"를 사용하려고했지만 작동하지 않는다.머티리얼 -UI 메뉴 높이 문제

어떤 도움 ??

나는 다음과 같은 코드가 있습니다

import React, { Component } from 'react'; 
import Menu from 'material-ui/Menu'; 
import MenuItem from 'material-ui/MenuItem'; 
import './mystyle.css'; 

const mainmenu = { 
width: '180px', 
height: '100%', 
}; 

class MenuView extends Component { 
render() { 
    return (
    <div className="dash-menuview"> 
     <Menu style={mainmenu} className="mydashboard"> 
     <MenuItem primaryText="My Name" style={{color:'white'}} href="#/name" onClick={handlers.changeURL}/> 
     <MenuItem primaryText="Personal Information" style={{color:'white'}} href="#/information" onClick={handlers.changeURL}/> 
     <MenuItem primaryText="My Address" style={{color:'white'}} href="#/current" onClick={handlers.changeURL}/> 
     <MenuItem primaryText="My Files" style={{color:'white'}} href="#/files" onClick={handlers.logout}/> 
     </Menu> 
    </div> 
); 
} 
} 
export default MenuView; 

mystyle.css

.dash-menuview { 
    margin-left: -8.8%; 
} 
.mydashboard { 
    background: #545454; 
    color: #FFFFFF; 
    text-decoration: none; 
    color: white; 
    margin-left: 0%; 
    font-weight: bold; 
} 

답변

0

height:30height:100%를 교체 시도하고 또한 lineHeight:30 그것은 작동하지 않습니다

+0

에 같은 높이를 지정을 .. 신중하게 질문을 읽으십시오. 나는 메뉴 높이가 자동 증가하기를 원한다. 페이지의 요소가 수직으로 증가 할 때마다 예를 들어 '개인 정보'를 클릭하고 페이지의 요소가 증가하고 스크롤 막대가 올 경우 메뉴 높이가 창과 관련하여 자동으로 증가해야합니다. 그게 전부 야 .. – Subhojit

+0

당신이 현재 가지고있는 것과 원하는 결과물의 그림으로 더 많은 정보를 제공해주십시오. 또한 jsfiddle 또는 codepen을 추가하십시오. –