固定标题与水平滚动

Question

I'm working on a progressive web application, where the user can create code blocks that can expand horizontally (depending on the size of the content), and also, i have a fixed top app bar, but, when the page content overflow the page in the x axis, the top app bar options are pushed to the invisible side of canvas

Live web app: https://ide.code101.com.br

 /* Prevent user from clicking on page elements before loading */ html {pointer-events: none} a, a:hover, a:focus {text-decoration: none} #editArea, #codeOutput {padding: 10px} #editArea, .sortable { list-style-type: none; font-size: 18px; } #editArea *:not(.material-icons) {clear: both} /* FIX SIZE ISSUES WITH MDC TEXTFIELD ON DIALOG (OUTLINED) */ .mdc-dialog .mdc-text-field {width: 100%} .mdc-dialog .mdc-text-field--outlined::before, .mdc-dialog .mdc-text-field--outlined::after { width: 0 !important; height: 0 !important; } /* ############################## */ .mdc-top-app-bar, .mdc-drawer, .mdc-dialog {user-select: none} .mdc-top-app-bar--fixed-adjust {height: 100vh} .list {min-height: 44.5px} .codeide-logo {font-family: "Press Start 2P"} .scrollDiv { position: fixed; width: 100%; padding: 20px; bottom: 0; z-index: -1; } /* BLOCKS COLOR HIGHLIGHT (MONOKAI) #272822 - BLACK #F92672 - RED #66D9EF - BLUE #A6E22E - GREEN #FD971F - ORANGE -----------------------------*/ .commandBlock { box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding: 8px 16px !important; margin-bottom: 16px !important; border-radius: 4px; float: left !important; } .code {display: none} .drag { float: left !important; margin-right: 16px !important; } .close { float: right !important; margin-left: 16px !important; } .editable { white-space: nowrap; background-color: #FD971F; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); padding: 4px 8px !important; border-radius: 4px; } .cmd_alert {background-color: #66D9EF} .cmd_if, .cmd_else, .cmd_for {background-color: #A6E22E} .cmd_comment {background-color: #BDC3C7} /* ########## CODE BLOCKS ########## */ body.dragging, body.dragging * {cursor: move !important} .dragged { opacity: 0.5; overflow: hidden; } ul.list { padding-left: 0; margin: 0 0 9px 0; min-height: 10px; } ul.list li { color: white; display: block; margin: 5px 0; padding: 5px; user-select: none; box-sizing: content-box; } ul.list li.placeholder { position: relative; margin: 0; padding: 0; border-color: red; border-style: dotted; z-index: 2000; } ul.list li.placeholder:before { position: absolute; content: ""; width: 0; height: 0; margin-top: -8px; left: -8px; top: -1px; border: 8px solid transparent; border-left-color: red; border-right: none; z-index: 2000; } 

  <!-- TOP APP BAR --> <header class="mdc-top-app-bar mdc-top-app-bar--fixed w3-card"> <div class="mdc-top-app-bar__row"> <!-- CONTENT AT LEFT --> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"> <!-- DRAWER BUTTON --> <a id="drawerBtn" onclick="drawer.open = true" class="material-icons mdc-top-app-bar__navigation-icon">menu</a> <!-- APP TITLE --> <span class="mdc-top-app-bar__title codeide-logo">codeIDE</span> </section> <!-- CONTENT AT RIGHT --> <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar"> <!-- CHANGE VIEW MODE --> <button class="mdc-icon-button material-icons" id="btnChangeView" onclick="changeViewMode()">code</button> <!-- SIDE MENU --> <div class="mdc-menu-surface--anchor"> <a onclick="menu.open = !menu.open" class="material-icons mdc-top-app-bar__action-item" aria-label="Opções" alt="Opções">more_vert</a> <div class="mdc-menu mdc-menu-surface" tabindex="-1"> <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical"> <!-- EXPORT FILE --> <li onclick="exportFile($('#editArea').html())" class="mdc-list-item" role="menuitem"> <i class="mdc-list-item__graphic material-icons">save</i> <span class="mdc-list-item__text">Exportar arquivo</span> </li> <!-- IMPORT FILE --> <li onclick="importFile()" class="mdc-list-item" role="menuitem"> <i class="mdc-list-item__graphic material-icons">folder_open</i> <span class="mdc-list-item__text">Importar arquivo</span> </li> <li class="mdc-list-divider" role="separator"></li> <!-- NIGHT MODE --> <li id="nightModeBtn" onclick="nightMode('trigger')" class="mdc-list-item" role="menuitem"> <i class="mdc-list-item__graphic material-icons">brightness_2</i> <span class="mdc-list-item__text">Modo noturno</span> </li> <!-- ABOUT --> <li onclick="displayAboutDialog()" class="mdc-list-item" role="menuitem"> <i class="mdc-list-item__graphic material-icons">info</i> <span class="mdc-list-item__text">Sobre</span> </li> <li class="mdc-list-divider" role="separator"></li> <!-- CODE101 --> <li onclick="location.href='https://code101.com.br'" class="mdc-list-item" role="menuitem"> <i class="mdc-list-item__graphic material-icons">launch</i> <span class="mdc-list-item__text">Visitar o code101</span> </li> </ul> </div> </div> </section> </div> </header> 

Answer 1

I Solved it!

by removing the overflow: scroll css property from the body , and passed it to the code blocks list element ( #list )

Answer 2

Wont $('.headername').css('width',$(window).width()); not work? Considering you're only requiring your header in a viewable window space, since its floating