title: ie11 fixed header not working allowing scroll over
body: <p>I've got a bit of javascript code where on selecting a menu item a pdf file gets loaded into field id=content.  I've also got a fixed header and footer in place.  The code works fine with Chrome, Safari, Edge, Firefox, &amp; Opera but IE11 ignores the fixed header and footer where I've loaded the pdf (but not to the left where I've got the menu).  </p>
  
  <p>Here's the javascript to load the pdf:</p>
  
  <pre><code>document.getElementById('content').innerHTML = "&lt;object id='provue_file' data='"+file_name+"#view=FitH' type='application/pdf' width='100%'&gt;&lt;p&gt;It appears you don't have Adobe Reader or PDF support in this web browser. &lt;a href='"+file_name+"'&gt;Click here to download the PDF&lt;/a&gt;. Or &lt;a href='http://get.adobe.com/reader/' target='_blank'&gt;click here to install Adobe Reader&lt;/a&gt;.&lt;/p&gt;&lt;/object&gt;";
  </code></pre>
  
  <p>Here's the header and footer css declarations:</p>
  
  <pre><code>div.header, div.footer {
      padding: 0.5em;
      color: blue;
      background-color: honeydew;
      clear: left;
  }
  
  .footer {
      border-top:1px solid gray;
      left:0;
      bottom:0;
      position: fixed;
      width: 100%;
  }
  
  .header {
      padding:0;
      margin:0;
      top:0;
      left:0;
      width: 100%;
      position: fixed;
      border-bottom:1px solid gray;
  }
  </code></pre>
  
  <p>And here's the html declaring content:</p>
  
  <pre><code>&lt;div class="content" id="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please note, it is fine in IE11 until the javascript is run</p>