--- a/devtools/client/framework/toolbox-hosts.js
+++ b/devtools/client/framework/toolbox-hosts.js
@@ -63,20 +63,20 @@ BottomHost.prototype = {
 
     this._splitter = ownerDocument.createElement("splitter");
     this._splitter.setAttribute("class", "devtools-horizontal-splitter");
     // Avoid resizing notification containers
     this._splitter.setAttribute("resizebefore", "flex");
 
     this.frame = ownerDocument.createElement("iframe");
     this.frame.className = "devtools-toolbox-bottom-iframe";
-    this.frame.height = Math.min(
+    this.frame.style.height = Math.min(
       Services.prefs.getIntPref(this.heightPref),
       this._nbox.clientHeight - MIN_PAGE_SIZE
-    );
+    ) + "px";
 
     this._nbox.appendChild(this._splitter);
     this._nbox.appendChild(this.frame);
 
     this.frame.tooltip = "aHTMLTooltip";
 
     // we have to load something so we can switch documents if we have to
     this.frame.setAttribute("src", "about:blank");
@@ -117,17 +117,17 @@ BottomHost.prototype = {
         // Ignore transitionend on unrelated properties.
         return;
       }
 
       this.frame.removeEventListener("transitionend", onTransitionEnd);
       this.emit("minimized");
     };
     this.frame.addEventListener("transitionend", onTransitionEnd);
-    this.frame.style.marginBottom = -this.frame.height + height + "px";
+    this.frame.style.marginBottom = (height - parseInt(this.frame.style.height, 10)) + "px";
     this._splitter.classList.add("disabled");
   },
 
   /**
    * If the host was minimized before, maximize it again (the host will be
    * maximized to the height it previously had).
    */
   maximize: function () {
@@ -166,17 +166,17 @@ BottomHost.prototype = {
 
   /**
    * Destroy the bottom dock.
    */
   destroy: function () {
     if (!this._destroyed) {
       this._destroyed = true;
 
-      Services.prefs.setIntPref(this.heightPref, this.frame.height);
+      Services.prefs.setIntPref(this.heightPref, parseInt(this.frame.style.height, 10));
       this._nbox.removeChild(this._splitter);
       this._nbox.removeChild(this.frame);
       this.frame = null;
       this._nbox = null;
       this._splitter = null;
     }
 
     return promise.resolve(null);
@@ -208,20 +208,20 @@ SidebarHost.prototype = {
     this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
 
     this._splitter = ownerDocument.createElement("splitter");
     this._splitter.setAttribute("class", "devtools-side-splitter");
 
     this.frame = ownerDocument.createElement("iframe");
     this.frame.className = "devtools-toolbox-side-iframe";
 
-    this.frame.width = Math.min(
+    this.frame.style.width = Math.min(
       Services.prefs.getIntPref(this.widthPref),
       this._sidebar.clientWidth - MIN_PAGE_SIZE
-    );
+    ) + "px";
 
     this._sidebar.appendChild(this._splitter);
     this._sidebar.appendChild(this.frame);
 
     this.frame.tooltip = "aHTMLTooltip";
     this.frame.setAttribute("src", "about:blank");
 
     let frame = await new Promise(resolve => {
@@ -252,17 +252,17 @@ SidebarHost.prototype = {
 
   /**
    * Destroy the sidebar.
    */
   destroy: function () {
     if (!this._destroyed) {
       this._destroyed = true;
 
-      Services.prefs.setIntPref(this.widthPref, this.frame.width);
+      Services.prefs.setIntPref(this.widthPref, parseInt(this.frame.style.width, 10));
       this._sidebar.removeChild(this._splitter);
       this._sidebar.removeChild(this.frame);
     }
 
     return promise.resolve(null);
   }
 };
 

--- a/devtools/client/framework/toolbox.js
+++ b/devtools/client/framework/toolbox.js
@@ -496,17 +496,18 @@ Toolbox.prototype = {
       this._registerOverlays();
       if (!this._hostOptions || this._hostOptions.zoom === true) {
         ZoomKeys.register(this.win);
       }
 
       this._componentMount.addEventListener("keypress", this._onToolbarArrowKeypress);
 
       this.webconsolePanel = this.doc.querySelector("#toolbox-panel-webconsole");
-      this.webconsolePanel.height = Services.prefs.getIntPref(SPLITCONSOLE_HEIGHT_PREF);
+      this.webconsolePanel.style.height =
+        Services.prefs.getIntPref(SPLITCONSOLE_HEIGHT_PREF) + "px";
       this.webconsolePanel.addEventListener("resize", this._saveSplitConsoleHeight);
 
       let buttonsPromise = this._buildButtons();
 
       this._pingTelemetry();
 
       // The isTargetSupported check needs to happen after the target is
       // remoted, otherwise we could have done it in the toolbox constructor
@@ -930,17 +931,17 @@ Toolbox.prototype = {
   },
 
   _registerOverlays: function () {
     registerHarOverlay(this);
   },
 
   _saveSplitConsoleHeight: function () {
     Services.prefs.setIntPref(SPLITCONSOLE_HEIGHT_PREF,
-      this.webconsolePanel.height);
+      parseInt(this.webconsolePanel.style.height, 10));
   },
 
   /**
    * Make sure that the console is showing up properly based on all the
    * possible conditions.
    *   1) If the console tab is selected, then regardless of split state
    *      it should take up the full height of the deck, and we should
    *      hide the deck and splitter.

--- a/devtools/client/framework/toolbox.xul
+++ b/devtools/client/framework/toolbox.xul
@@ -48,15 +48,15 @@
   <vbox id="toolbox-container" flex="1">
     <div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-notificationbox"/>
     <div xmlns="http://www.w3.org/1999/xhtml" id="toolbox-toolbar-mount" />
     <vbox flex="1" class="theme-body">
       <!-- Set large flex to allow the toolbox-panel-webconsole to have a
            height set to a small value without flexing to fill up extra
            space. There must be a flex on both to ensure that the console
            panel itself is sized properly -->
-      <box id="toolbox-deck" flex="1000" minheight="75" />
+      <box id="toolbox-deck" flex="1000" />
       <splitter id="toolbox-console-splitter" class="devtools-horizontal-splitter" hidden="true" />
-      <box minheight="75" flex="1" id="toolbox-panel-webconsole" collapsed="true" />
+      <box flex="1" id="toolbox-panel-webconsole" collapsed="true" />
     </vbox>
     <tooltip id="aHTMLTooltip" page="true" />
   </vbox>
 </window>

--- a/devtools/client/themes/toolbox.css
+++ b/devtools/client/themes/toolbox.css
@@ -34,16 +34,21 @@
   --command-pick-image: url(images/firebug/command-pick.svg);
   --command-frames-image: url(images/firebug/command-frames.svg);
   --command-splitconsole-image: url(images/firebug/command-console.svg);
   --command-noautohide-image: url(images/firebug/command-noautohide.svg);
   --command-rulers-image: url(images/firebug/command-rulers.svg);
   --command-measure-image: url(images/firebug/command-measure.svg);
 }
 
+#toolbox-deck,
+#toolbox-panel-webconsole {
+  min-height: 75px;
+}
+
 /* Toolbox tabbar */
 
 .devtools-tabbar {
   -moz-appearance: none;
   display: flex;
   background: var(--theme-tab-toolbar-background);
   border-bottom: 1px solid var(--theme-splitter-color);
   box-sizing: border-box;

--- a/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_split_persist.js
+++ b/devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_split_persist.js
@@ -23,19 +23,19 @@
     ok(!toolbox.splitConsole, "Split console is hidden by default.");
     ok(!isCommandButtonChecked(), "Split console button is unchecked by " +
                                   "default.");
     yield toggleSplitConsoleWithEscape();
     ok(toolbox.splitConsole, "Split console is now visible.");
     ok(isCommandButtonChecked(), "Split console button is now checked.");
     ok(getVisiblePrefValue(), "Visibility pref is true");
 
-    is(getHeightPrefValue(), toolbox.webconsolePanel.height,
+    is(getHeightPrefValue() + "px", toolbox.webconsolePanel.style.height,
        "Panel height matches the pref");
-    toolbox.webconsolePanel.height = 200;
+    toolbox.webconsolePanel.style.height = "200px";
 
     yield toolbox.destroy();
 
     info("Opening a tab while there is a true user setting on split console " +
          "pref");
     ({tab} = yield loadTab(TEST_URI));
     target = TargetFactory.forTab(tab);
     toolbox = yield gDevTools.showToolbox(target, "inspector");
@@ -46,21 +46,21 @@
                                   "closing");
 
     // Use the binding element since jsterm.inputNode is a XUL textarea element.
     let activeElement = getActiveElement(toolbox.doc);
     activeElement = activeElement.ownerDocument.getBindingParent(activeElement);
     let inputNode = toolbox.getPanel("webconsole").hud.jsterm.inputNode;
     is(activeElement, inputNode, "Split console input is focused by default");
 
-    toolbox.webconsolePanel.height = 1;
+    toolbox.webconsolePanel.style.height = "1px";
     ok(toolbox.webconsolePanel.clientHeight > 1,
        "The actual height of the console is bound with a min height");
 
-    toolbox.webconsolePanel.height = 10000;
+    toolbox.webconsolePanel.style.height = "10000px";
     ok(toolbox.webconsolePanel.clientHeight < 10000,
        "The actual height of the console is bound with a max height");
 
     yield toggleSplitConsoleWithEscape();
     ok(!toolbox.splitConsole, "Split console is now hidden.");
     ok(!isCommandButtonChecked(), "Split console button is now unchecked.");
     ok(!getVisiblePrefValue(), "Visibility pref is false");
 

--- a/devtools/client/webconsole/test/browser_webconsole_split_persist.js
+++ b/devtools/client/webconsole/test/browser_webconsole_split_persist.js
@@ -23,19 +23,19 @@
     ok(!toolbox.splitConsole, "Split console is hidden by default.");
     ok(!isCommandButtonChecked(), "Split console button is unchecked by " +
                                   "default.");
     yield toggleSplitConsoleWithEscape();
     ok(toolbox.splitConsole, "Split console is now visible.");
     ok(isCommandButtonChecked(), "Split console button is now checked.");
     ok(getVisiblePrefValue(), "Visibility pref is true");
 
-    is(getHeightPrefValue(), toolbox.webconsolePanel.height,
+    is(getHeightPrefValue() + "px", toolbox.webconsolePanel.style.height,
        "Panel height matches the pref");
-    toolbox.webconsolePanel.height = 200;
+    toolbox.webconsolePanel.style.height = "200px";
 
     yield toolbox.destroy();
 
     info("Opening a tab while there is a true user setting on split console " +
          "pref");
     ({tab} = yield loadTab(TEST_URI));
     target = TargetFactory.forTab(tab);
     toolbox = yield gDevTools.showToolbox(target, "inspector");
@@ -46,21 +46,21 @@
                                   "closing");
 
     // Use the binding element since jsterm.inputNode is a XUL textarea element.
     let activeElement = getActiveElement(toolbox.doc);
     activeElement = activeElement.ownerDocument.getBindingParent(activeElement);
     let inputNode = toolbox.getPanel("webconsole").hud.jsterm.inputNode;
     is(activeElement, inputNode, "Split console input is focused by default");
 
-    toolbox.webconsolePanel.height = 1;
+    toolbox.webconsolePanel.style.height = "1px";
     ok(toolbox.webconsolePanel.clientHeight > 1,
        "The actual height of the console is bound with a min height");
 
-    toolbox.webconsolePanel.height = 10000;
+    toolbox.webconsolePanel.style.height = "10000px";
     ok(toolbox.webconsolePanel.clientHeight < 10000,
        "The actual height of the console is bound with a max height");
 
     yield toggleSplitConsoleWithEscape();
     ok(!toolbox.splitConsole, "Split console is now hidden.");
     ok(!isCommandButtonChecked(), "Split console button is now unchecked.");
     ok(!getVisiblePrefValue(), "Visibility pref is false");