Fixes to notebook scrolling and layout.

We are now using the flexible box model, so the layout won't work
on IE9, but it already doesn't work on IE9 because of WS support.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -67,6 +67,33 @@ pre, code, kbd, samp { font-family: monospace, sans-serif; }
 body {
     background-color: white;
     font-size: 10pt;
+
+    /* This makes sure that the body covers the entire window and needs to
+       be in a different element than the display: box in wrapper below */
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
+}
+
+div#wrapper {
+    display: box;
+    box-orient: vertical;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+
+    display: -moz-box;
+    -moz-box-orient: vertical;
+
+    /* This is needed to make sure the wrapper fills the body */
+    width: 100%;
+    height: 100%;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 
 span#ipython_notebook h1 {
@@ -78,7 +105,6 @@ span#ipython_notebook h1 {
 
 div#toolbar {
     width: 100%;
-    height: auto;
     border-bottom-width: 2px;
     border-bottom-style: solid;
     border-bottom-color: black;
@@ -105,22 +131,36 @@ span#kernel_status {
 }
 
 div.notebook {
-    width: 790px;
-    height: 650px;  /*We might have to detect window height for this*/
-    overflow: auto;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 5px;
-    padding-bottom: 5px;
+    /* This is a trick from Google Docs. We set the height artificially low
+       and set overflow-y: auto to force scrolling of this dev when needed,
+       but prevent the browser window from scrolling. Crazy hack */
+    height: 15px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 5px;
+/*    padding-top: 5px;*/
+/*    padding-bottom: 5px;*/
     background-color: white;
+
+    /* Allow the notebook div to take up the rest of the vertical space */
+    box-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 
 div.cell {
-    width: 740px;
-    margin: 5px auto 5px 5px;
+    width: 100%;
+/*    margin: 10px;*/
     padding: 5px;
     position: relative;
     display: table;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 
 div.code_cell {
@@ -142,6 +182,15 @@ div.input {
     display: table-row;
     padding: 0px;
     margin: 0px;
+
+    display: box;
+    box-orient: horizontal;
+
+    display: -webkit-box;
+    -webkit-box-orient: horizontal;
+
+    display: -moz-box;
+    -moz-box-orient: horizontal;
 }
 
 div.input_prompt {
@@ -159,9 +208,16 @@ textarea.input_area {
     overflow: auto;
     font-weight: normal;
     font-style: normal;
-    width: 650px;
+/*    width: 650px;*/
     outline: none;
     resize: none;
+    
+    box-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
 }
 
 div.output {
@@ -180,7 +236,7 @@ div.output_area {
     padding: 0px;
     margin: 0px;
     display: table-cell;
-    width:  650px;
+/*    width:  650px;*/
 }
 
 div.text_cell {

IPython/frontend/html/notebook/static/js/notebook.js

@@ -116,6 +116,7 @@ Notebook.prototype.bind_events = function () {
             if (cell instanceof CodeCell) {
                 event.preventDefault();
                 cell.clear_output();
+                cell.hide_output_prompt();
                 var msg_id = that.kernel.execute(cell.get_code());
                 that.msg_cell_map[msg_id] = cell.cell_id;
                 if (cell_index === (that.ncells()-1)) {
@@ -456,6 +457,7 @@ Notebook.prototype._kernel_started = function () {
             cell.expand();
             cell.append_stream(reply.content.data + "\n");
         } else if (msg_type === "pyout" || msg_type === "display_data") {
+            cell.show_output_prompt();
             cell.expand();
             cell.append_display_data(reply.content.data);
         } else if (msg_type === "status") {
@@ -625,6 +627,14 @@ CodeCell.prototype.set_output_prompt = function (number) {
     this.element.find('div.output_prompt').html('Out[' + n + ']:');
 };
 
+CodeCell.prototype.hide_output_prompt = function () {
+    this.element.find('div.output_prompt').hide();
+};
+
+CodeCell.prototype.show_output_prompt = function () {
+    this.element.find('div.output_prompt').show();
+};
+
 
 CodeCell.prototype.get_code = function () {
     return this.element.find("textarea.input_area").val();

IPython/frontend/html/notebook/templates/notebook.html

@@ -18,6 +18,8 @@
 
 <body>
 
+<div id="wrapper">
+
 <div id="header">
     <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
 </div>
@@ -78,6 +80,8 @@
 
 <div class="notebook"></div>
 
+</div>
+
 <script src="static/jquery/js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery-ui-1.8.11.custom.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>