如何停止我的应用程序的Sticky标头的水平滚动

Question

The following shows the layout of my application: http://jsfiddle.net/rhgyLjvx/

It has app main header (red), sticky section header (dark blue), fixed footer (grey) and fixed left side nav (green). The application should have full scroll bars on both sides. And should scroll only the main section (yellow).

The vertical scroll happens as I want. But sticky section header (dark blue) horizontally scrolls with the section.

Is there any way to get the sticky header fixed to left and right sides and stop scrolling sideways?

I'm having another big problem. My whole application scrolls in devices including the fixed position divs. Please check in mobile emulator.

 Array.from(document.querySelectorAll('.Sticky')).forEach((stickyEl) => { console.log("&&&&&&&&&&&&&&&&&&& ", stickyEl) Stickyfill.add(stickyEl); }); 

 #root, body, html { height: 100%; width: 100%; } .app { height: 100%; width: 100%; } .main { padding-top: 70px; height: 100%; box-sizing: border-box; } .header { width: 100%; float: left; min-height: 70px; max-height: 70px; background-color:red; padding: 20px; box-sizing: border-box; position: fixed; z-index: 999; } .sidenav { background-color:green; width: 250px; float: left; overflow-y: auto; position: fixed; height: 100%; z-index: 999; } .landing { height: 100%; background-color: black; position: absolute; left: 250px; } .content { padding: 5px; height: 100%; background-color: grey; } .view { width: 100%; background-color: aqua; } .page-header { background-color: #0c004a; height: 50px; z-index: 999; position: sticky; top: 70px; right: 0; left: 250px; margin-left: 5px; margin-right: 5px; } .page-section { flex: 0 1 auto; margin-bottom: 50px; background-color: purple; } .page-content { width: 100%; background-color: pink; } .page-panel { display: block; background-color: yellow; margin-bottom: .5rem; width: 75rem; min-height: 43.8rem; } .page-footer { height: 50px; background-color: #979797; opacity: 1; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; right: 0; left: 250px; } 

  <div id="root"> <div class="app"> <header id="app-header" class="header"></header> <div class="main"> <nav id="side-nav" class="sidenav"></nav> <div class="landing"> <div class="content"> <div id="adeb-maint" class="view"> <div class="Sticky page-header"></div> <div class="page-section"> <div class="page-content"> <div class="page-panel" style="width: 75rem; min-height: 43.8rem;"> <label>Customer WWDSSD:</label> <label style="margin-top: 750px;display: block;">Last Change skdjskdq :</label> </div> </div> </div> <div class="page-footer"> <div class="actions-bar"> <button name="OK" class="ok">OK</button> <button name="Cancel" class="cancel">Cancel</button> </div> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.0.3/stickyfill.min.js"></script> 

Answer 1

You need to learn about CSS display: flex et al. Tutorial

Or you can find an example here

The real bonus here is the page size and orientation changesare handled for you.

Answer 2

Code Clean Up I have amended the HTML as it appeared to have a lot of nested DIVS that wasnt serving any purpose

There was also references to classes that was not in your CSS, the JavaScript (jQuery) wasnt serving any purpose what so ever (not for the content you have supplied us with)

Preview Code I have viewed the code in a larger preview window and works fine, you will need to alter the CSS to reflect the height you want.

 #root, body, html { width: 100%; margin: 0 } header { background-color:red; position: fixed; width: 100%; min-height: 70px; max-height: 70px; box-sizing: border-box; padding: 20px; z-index: 2; } .pro-main { padding-top: 70px; box-sizing: border-box; } nav { background-color:green; position: fixed; height: 100%; overflow-y: auto; width: 250px; z-index: 2; } .pro-landing { position: absolute; left: 250px; background: #979797; padding: 5px; } .objectview { width: 100%; background-color: aqua; } .card-header { background-color: #0c004a; position: fixed; top: 70px; height: 50px; width: 100% ; z-index: 5; border-top: 5px solid #979797; } .card-section { margin-bottom: 50px; width: 100%; } .card-panel { display: block; background-color: yellow; margin-bottom: .5rem; padding-top: 50px; width: 75rem; min-height: 43.8rem; } .card-footer { background-color: #979797; position: fixed; bottom: 0; right: 0; left: 250px; height: 50px; text-align: right; line-height: 3em; padding-right: 1ex; } 

 <div id="root"> <header id="app-header" class="pro-header"></header> <div class="pro-main"> <nav id="side-nav"></nav> <div class="pro-landing"> <div id="deb/m10mast/debtor-maint" class="objectview"> <div class="card-section"> <div class="card-header"></div> <div class="card-panel" style="width: 75rem; min-height: 43.8rem;"> <label>Customer WWDSSD:</label> <label style="margin-top: 750px;display: block;">Last Change skdjskdq :</label> </div> </div> <div class="card-footer"> <div> <button name="OK" class="ok">OK</button> <button name="Cancel" class="cancel">Cancel</button> </div> </div> </div> </div> </div> </div> 

Answer 3

 /* You just need to update it like following */
 .card-panel
 {
position: absolute;
}

.card-header {

position: fixed;
top: 78px;
right: 0;
left: 254px;

}