[Solved] Left side panel not full screen height


Left side panel not full screen height when on a iphone device with a notch.


Correct, because top part is Statusbar https://framework7.io/docs/statusbar.html


Yeah, but no native app works that way. They all extend through the status bar. LinkedIn, Lyft, Uber, PersonalCapital, etc




Lot of native apps works that way. If you need such behavior, it can be easily tweaked by adding few custom styles, something like:

.panel-cover {
  top: 0;
  z-index: 10100;
  height: 100%;
  --f7-page-content-extra-padding-top: var(--f7-statusbar-height);
.panel-cover .navbar {
  height: calc(var(--f7-navbar-height) + var(--f7-statusbar-height));
.panel-cover .navbar-inner {
  top: var(--f7-statusbar-height);
.panel-backdrop {
  z-index: 10050;
  top: 0;
  height: 100%;


Thanks! It looks awesome now!

(I had tried playing with zindex and padding, but didn’t know about the extra padding var)