title: CSS Layout Constrained To Browser Window?
body: <p>I have spent at least 10 hours trying to figure out how to achieve the depicted layout with HTML and CSS and I've come up with nothing. I have searched endlessly and while a lot of answers seem to come close, I can't quite tweak it into place.</p>
  
  <p>I just want to make a simple browser app that has a header, footer, menu bar on the left, and a map with a nav bar as the main content. I want the map to be constrained to the content div and not just "overflowing-but-hidden". And I would love if there were never any scrollbars, if everything just fit in place. Is this possible with CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/mS2cc.png" alt="enter image description here"></p>
  
  <p>PLEASE PLEASE, I'm dying here!</p>