userChrome.css

/* Windows users might also want to consider setting
 * browser.tabs.drawInTitlebar to false in about:config
 */

#TabsToolbar {
  visibility: collapse !important;
}

#titlebar {
  display: none;
}

#sidebar-box {
  overflow: hidden;
  min-width: 4vw;
  max-width: 4vw;
  position: fixed;
  transition: all 0.2s ease;
  border-right: 1px solid #777;
}

#sidebar-box:hover,
#sidebar-header,
#sidebar {
  min-width: 20vw !important;
  max-width: 20vw !important;
}

#sidebar-header,
#sidebar-splitter {
  display: none;
}

/*
 * ADJUST!
 * You need to subtract the height of the panels above sidebar: nav bar,
 * bokmarks bar, sidebar header, etc. -- whichever you have enabled.
 * 
 * 43px subtracted below is the height of the nav bar with default theme.
 * I don't have bookmarks bar enabled, and sidebar header is hidden with
 * CSS above, so this is all I need to do.
 * 
 * Compact nav bar height is 37px btw, if you use that.
 */
#sidebar {
  height: calc(100vh - 37px); 
}

#sidebar-box:not([hidden]) ~ #appcontent {
  margin-left: 4vw;
}

#main-window[inFullscreen][inDOMFullscreen] #appcontent {
  margin-left: 0;
}

#main-window[inFullscreen] #sidebar {
  height: 100vh;
}