cssを適用して、メニューの高さをウィンドウの高さと同じに設定したい。ページ内の要素が垂直方向に増加する場合、ページの長さに関して、メニューの高さも増加する必要があります。「height:100%」を使用し、スタイルで「height: 100vh」も使用しようとしましたが、機能しません。
何か助けて??
次のコードがあります。
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;
マイスタイル.css
.dash-menuview {
margin-left: -8.8%;
}
.mydashboard {
background: #545454;
color: #FFFFFF;
text-decoration: none;
color: white;
margin-left: 0%;
font-weight: bold;
}