body { margin: 0px; } :root { --top-height: 34px; --side-width: 37px; --bottom-height: 32px; --menu-bg-color: #333; --menu-fg-color: linen; } .page_side { position: absolute; top: var(--top-height); left: 0px; width: var(--side-width); height: calc(100vh - var(--top-height) - var(--bottom-height)); max-height: calc(100vh - var(--top-height) - var(--bottom-height)); color: var(--menu-fg-color); background: var(--menu-bg-color); } .side_btn_mode { background-color: lightgray; padding: 0px 0px; margin: 0px 0px; } .side_btn { background-color: lightgray; padding: 0px 0px; margin: 0px 0px; } .side_btn_selected{ background-color: gray; padding: 0px 0px; margin: 0px 0px; } .side_btn_poweron{ background-color: lightgreen; padding: 0px 0px; margin: 0px 0px; } .side_btn_poweroff{ background-color: lightgray; padding: 0px 0px; margin: 0px 0px; } .side_btn_shortcircuit{ background-color: red; padding: 0px 0px; margin: 0px 0px; } .side_btn_stop{ background-color: yellow; padding: 0px 0px; margin: 0px 0px; } .side_btn:hover { background-color: white; } .side_btn_mode:hover { background-color: white; } .page_main { position: absolute; top: var(--top-height); left: var(--side-width); width: calc(100vw - var(--side-width)); height: calc(100vh - var(--top-height) - var(--bottom-height)); background: lightgray; overflow: auto; } .page_bottom { position: absolute; top: calc(100vh - var(--bottom-height)); left: 0px; height: var(--bottom-height); width: 100vw; background: var(--menu-bg-color); color: var(--menu-fg-color); overflow: auto; } .navbar { overflow: hidden; color: var(--menu-fg-color); background: var(--menu-bg-color); } .navbar a { float: left; font-size: 16px; color: var(--menu-fg-color); text-align: center; padding: 8px 8px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: var(--menu-fg-color); padding: 8px 8px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: blue; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 8px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; }