don't use fixed header

instead, use static header and flex box to accomplish the same thing.

fixes various issues related to scrolling, anchors, etc.

IPython/html/static/base/less/page.less

@@ -14,6 +14,7 @@ body {
     right: 0px;
     top: 0px;
     bottom: 0px;
+    .vbox();
     overflow: visible;
 }
 
@@ -81,6 +82,9 @@ body {
     width: 100%;
     display: none;
     .border-box-sizing();
+    flex: 1;
+    overflow: auto;
+    height: 0px; // triggers overflow, but overridded by flex
 }
 
 /* Smaller buttons */

IPython/html/static/style/style.min.css

@@ -8265,6 +8265,20 @@ body {
   right: 0px;
   top: 0px;
   bottom: 0px;
+  /* Old browsers */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-box-align: stretch;
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-align: stretch;
+  display: box;
+  box-orient: vertical;
+  box-align: stretch;
+  /* Modern browsers */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
   overflow: visible;
 }
 #header {
@@ -8329,6 +8343,9 @@ body {
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
+  flex: 1;
+  overflow: auto;
+  height: 0px;
 }
 /* Smaller buttons */
 .ui-button .ui-button-text {

IPython/html/templates/page.html

@@ -81,7 +81,7 @@
   </div>
 </noscript>
 
-<div id="header" class="navbar navbar-fixed-top">
+<div id="header">
   <div id="header-container" class="container">
   <div id="ipython_notebook" class="nav navbar-brand pull-left"><a href="{{base_url}}tree" title='dashboard'>{% block logo %}<img src='{{static_url("base/images/logo.png") }}' alt='Jupyter Notebook'/>{% endblock %}</a></div>
 
@@ -106,8 +106,6 @@
   {% endblock %}
 </div>
 
-<div id="header-spacer"></div>
-
 <div id="site">
 {% block site %}
 {% endblock %}