diff --git a/src/client/theme-default/components/VPFooter.vue b/src/client/theme-default/components/VPFooter.vue
index 3a21ff2b..9d81bc7a 100644
--- a/src/client/theme-default/components/VPFooter.vue
+++ b/src/client/theme-default/components/VPFooter.vue
@@ -7,7 +7,11 @@ const { hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <footer v-if="theme.footer && frontmatter.footer !== false" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+  <footer
+    v-if="theme.footer && frontmatter.footer !== false && (!hasSidebar || theme.footer.showWithSidebar)"
+    class="VPFooter"
+    :class="{ 'has-sidebar': hasSidebar }"
+  >
     <div class="container">
       <p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
       <p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
@@ -24,10 +28,6 @@ const { hasSidebar } = useSidebar()
   background-color: var(--vp-c-bg);
 }
 
-.VPFooter.has-sidebar {
-  display: none;
-}
-
 .VPFooter :deep(a) {
   text-decoration-line: underline;
   text-underline-offset: 2px;
@@ -50,6 +50,12 @@ const { hasSidebar } = useSidebar()
   text-align: center;
 }
 
+@media (min-width: 960px) {
+  .has-sidebar .container {
+    padding-left: var(--vp-sidebar-width);
+  }
+}
+
 .message,
 .copyright {
   line-height: 24px;
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 5a669c49..69647ce8 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -341,6 +341,7 @@ export namespace DefaultTheme {
   export interface Footer {
     message?: string
     copyright?: string
+    showWithSidebar?: boolean
   }
 
   // team ----------------------------------------------------------------------