diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 09b692ac5..072f18bcf 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -715,6 +715,7 @@ StScrollBar StButton#vhandle:active {
 
 .panel-menu {
     -boxpointer-gap: 4px;
+    margin-bottom: 1.75em;
 }
 
 .panel-status-indicators-box,
diff --git a/js/ui/panelMenu.js b/js/ui/panelMenu.js
index 29acd29b4..092ca233a 100644
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -173,7 +173,8 @@ const Button = new Lang.Class({
         // menu is higher then the screen; it's useful if part of the menu is
         // scrollable so the minimum height is smaller than the natural height
         let workArea = Main.layoutManager.getWorkAreaForMonitor(Main.layoutManager.primaryIndex);
-        this.menu.actor.style = ('max-height: ' + Math.round(workArea.height) + 'px;');
+        let verticalMargins = this.menu.actor.margin_top + this.menu.actor.margin_bottom;
+        this.menu.actor.style = ('max-height: ' + Math.round(workArea.height - verticalMargins) + 'px;');
     },
 
     destroy: function() {