diff --git a/core/misc/dialog/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js
index 584b34fe21..55147aa56e 100644
--- a/core/misc/dialog/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas.es6.js
@@ -82,7 +82,7 @@
        * @see http://api.jqueryui.com/dialog for all dialog options.
        */
       const position = settings.drupalOffCanvasPosition;
-      const height = position === 'side' ? $(window).height() : '300px';
+      const height = position === 'side' ? $(window).height() : settings.height;
       const width = position === 'side' ? settings.width : '100%';
       settings.height = height;
       settings.width = width;
@@ -189,7 +189,7 @@
         },
       };
 
-      const height = position === 'side' ? `${$(window).height() - (offsets.top + offsets.bottom)}px` : '300px';
+      const height = position === 'side' ? `${$(window).height() - (offsets.top + offsets.bottom)}px` : event.data.settings.height;
       const width = position === 'side' ? event.data.settings.width : '100%';
       container.css({
         position: 'fixed',
@@ -227,10 +227,11 @@
         displace();
       }
 
+      const height = $container.outerHeight();
       if (event.data.settings.drupalOffCanvasPosition === 'top') {
-        $('nav#toolbar-bar').css('margin-top', '300px');
-        $mainCanvasWrapper.css('padding-top', '300px');
-        $container.attr('data-offset-top', 300);
+        $('nav#toolbar-bar').css('margin-top', `${height}px`);
+        $mainCanvasWrapper.css('padding-top', `${height}px`);
+        $container.attr('data-offset-top', height);
         displace();
       }
     },
diff --git a/core/misc/dialog/off-canvas.js b/core/misc/dialog/off-canvas.js
index 86bd47a9fc..cfbccfa307 100644
--- a/core/misc/dialog/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -36,7 +36,7 @@
       };
 
       var position = settings.drupalOffCanvasPosition;
-      var height = position === 'side' ? $(window).height() : '300px';
+      var height = position === 'side' ? $(window).height() : settings.height;
       var width = position === 'side' ? settings.width : '100%';
       settings.height = height;
       settings.width = width;
@@ -98,7 +98,7 @@
         }
       };
 
-      var height = position === 'side' ? $(window).height() - (offsets.top + offsets.bottom) + 'px' : '300px';
+      var height = position === 'side' ? $(window).height() - (offsets.top + offsets.bottom) + 'px' : event.data.settings.height;
       var width = position === 'side' ? event.data.settings.width : '100%';
       container.css({
         position: 'fixed',
@@ -125,10 +125,11 @@
         displace();
       }
 
+      var height = $container.outerHeight();
       if (event.data.settings.drupalOffCanvasPosition === 'top') {
-        $('nav#toolbar-bar').css('margin-top', '300px');
-        $mainCanvasWrapper.css('padding-top', '300px');
-        $container.attr('data-offset-top', 300);
+        $('nav#toolbar-bar').css('margin-top', height + 'px');
+        $mainCanvasWrapper.css('padding-top', height + 'px');
+        $container.attr('data-offset-top', height);
         displace();
       }
     },
diff --git a/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php b/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php
index aec2d82c9f..a969946c18 100644
--- a/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php
+++ b/core/modules/system/tests/modules/off_canvas_test/src/Controller/TestController.php
@@ -67,8 +67,8 @@ public function linksDisplay() {
           ]),
         ],
       ],
-      'off_canvas_top_link' => [
-        '#title' => 'Open top panel',
+      'off_canvas_top_link_1' => [
+        '#title' => 'Open top panel 1',
         '#type' => 'link',
         '#url' => Url::fromRoute('off_canvas_test.thing1'),
         '#attributes' => [
@@ -77,6 +77,19 @@ public function linksDisplay() {
           'data-dialog-renderer' => 'off_canvas_top',
         ],
       ],
+      'off_canvas_top_link_2' => [
+        '#title' => 'Open top panel 2',
+        '#type' => 'link',
+        '#url' => Url::fromRoute('off_canvas_test.thing2'),
+        '#attributes' => [
+          'class' => ['use-ajax'],
+          'data-dialog-type' => 'dialog',
+          'data-dialog-renderer' => 'off_canvas_top',
+          'data-dialog-options' => Json::encode([
+            'height' => 421,
+          ]),
+        ],
+      ],
       'other_dialog_links' => [
         '#title' => 'Display more links!',
         '#type' => 'link',
diff --git a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
index 789ccf8630..65ede4cfb3 100644
--- a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
+++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
@@ -36,25 +36,8 @@ public function testOffCanvasLinks() {
       // Check the first link again to make sure the empty title class is
       // removed.
       foreach (['1', '2', '1'] as $link_index) {
-        // Click the first test like that should open the page.
-        $page->clickLink("Click Me $link_index!");
-        $this->waitForOffCanvasToOpen();
-
-        // Check that the canvas is not on the page.
-        $web_assert->elementExists('css', '#drupal-off-canvas');
-        // Check that the canvas is positioned on the side.
-        $web_assert->elementExists('css', '.ui-dialog-position-side');
-        // Check that response text is on page.
-        $web_assert->pageTextContains("Thing $link_index says hello");
-        $off_canvas_tray = $this->getOffCanvasDialog();
-
-        // Check that tray is visible.
-        $this->assertEquals(TRUE, $off_canvas_tray->isVisible());
-        $header_text = $off_canvas_tray->find('css', '.ui-dialog-title')->getText();
-
-        $tray_text = $off_canvas_tray->findById('drupal-off-canvas')->getText();
-        $this->assertEquals("Thing $link_index says hello", $tray_text);
-
+        $this->assertOffCanvasDialog($link_index, 'side');
+        $header_text = $this->getOffCanvasDialog()->find('css', '.ui-dialog-title')->getText();
         if ($link_index == '2') {
           // Check no title behavior.
           $web_assert->elementExists('css', '.ui-dialog-empty-title');
@@ -74,14 +57,18 @@ public function testOffCanvasLinks() {
         }
       }
 
-      // Test an off_canvas_top tray.
-      $page->clickLink('Open top panel');
-      $this->waitForOffCanvasToOpen();
-
-      // Check that the canvas is not on the page.
-      $web_assert->elementExists('css', '#drupal-off-canvas');
-      // Check that the canvas is positioned at the top.
-      $web_assert->elementExists('css', '.ui-dialog-position-top');
+      // Test the off_canvas_top tray.
+      foreach ([1, 2] as $link_index) {
+        $this->assertOffCanvasDialog($link_index, 'top');
+        $this->clickLink("Open top panel $link_index");
+        $style = $page->find('css', '.ui-dialog-off-canvas')->getAttribute('style');
+        if ($link_index === 1) {
+          $this->assertTrue((bool) strstr($style, 'height: auto;'));
+        }
+        else {
+          $this->assertTrue((bool) strstr($style, 'height: 421px;'));
+        }
+      }
     }
   }
 
@@ -118,4 +105,34 @@ public function testNarrowWidth() {
     }
   }
 
+  /**
+   * @param int $link_index
+   *   The index of the link to test.
+   * @param string $position
+   *   The position of the dialog to test.
+   */
+  protected function assertOffCanvasDialog($link_index, $position) {
+    $page = $this->getSession()->getPage();
+    $web_assert = $this->assertSession();
+    $link_text = $position === 'side' ? "Click Me $link_index!" : "Open top panel $link_index";
+
+    // Click the first test like that should open the page.
+    $page->clickLink($link_text);
+    $this->waitForOffCanvasToOpen();
+
+    // Check that the canvas is not on the page.
+    $web_assert->elementExists('css', '#drupal-off-canvas');
+    // Check that the canvas is positioned on the side.
+    $web_assert->elementExists('css', '.ui-dialog-position-' . $position);
+    // Check that response text is on page.
+    $web_assert->pageTextContains("Thing $link_index says hello");
+    $off_canvas_tray = $this->getOffCanvasDialog();
+
+    // Check that tray is visible.
+    $this->assertEquals(TRUE, $off_canvas_tray->isVisible());
+
+    $tray_text = $off_canvas_tray->findById('drupal-off-canvas')->getText();
+    $this->assertEquals("Thing $link_index says hello", $tray_text);
+  }
+
 }