title: How to get TinyMCE fullscreen mode to work with Bootstrap NavBar
body: <p>Just started using TinyMCE in an MVC razor project and very impressed with the HTML editing.</p>
  
  <p>When I went to use it fullscreen however (using the following options) </p>
  
  <pre><code>$('#ApplicationHtmlTemplate').tinymce({
      theme: "modern",
      plugins: "code,pagebreak,fullpage,table,fullscreen,paste,spellchecker",
      toolbar1: "undo | redo | copy | paste | searchreplace | spellchecker | table | pagebreak | fullpage | fullscreen"
  })
  </code></pre>
  
  <p>I noticed it appears underneath the bootstrap header bar:</p>
  
  <p><a href="https://i.stack.imgur.com/p8arC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/p8arC.png" alt="enter image description here"></a></p>
  
  <p>What is the "correct" way to make the TinyMCE edit appear either underneath, or on top of, the Bootstrap nav bar? Preferably between the header and footer, but fullscreen would do.</p>
  
  <p>I tried setting the top and/or margins of the <code>mce-fullscreen</code> class, using the style below, but this a) seems hacky and b) does not work as the height is the full screen so the scrollbars disappear off the bottom.</p>
  
  <pre><code>div.mce-fullscreen {
      top: 55px;
  }
  </code></pre>