PrestaShop：如何调整页脚与页面内容间的间距

Hey there! Let's work through your two footer spacing problems step by step:

1. Reducing Excess Spacing Between Homepage Video and Footer #

You mentioned removing the margin from #footer in asylum.css but still seeing extra space—this is often because the spacing is coming from another element above the footer, not the footer itself. Here's how to track and fix it:

• Inspect the area between your video and footer using Chrome DevTools:
  1. Right-click the empty space and select "Inspect"
  2. Hover over elements in the DevTools panel to identify which container (like #content, a custom video wrapper, or a hidden section) is adding extra padding-bottom or margin-bottom
• Target the problematic element with custom CSS:
  • If the main content area (#content) has too much bottom padding:

    #content {
      padding-bottom: 20px; /* Adjust to your desired value (default was likely larger) */
    }
    

  • If your video's container has an unwanted bottom margin:

    .video-container { /* Replace with your actual video container class/id */
      margin-bottom: 15px;
    }
    

  • Double-check the footer's own padding (not margin) if space still remains:

    #footer {
      padding-top: 25px; /* Tweak this to reduce space above footer content */
    }
    

2. Making Footer Stick to Bottom with Spacing on Login Page #

To get the footer fixed at the bottom while keeping space between it and the login content, use flexbox for a reliable solution (works for both short and long content):

• Modify your page container and content area in CSS:

  /* Make the main page container a flex container that spans the full viewport height */
  #page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }
  
  /* Let the content area expand to fill available space, pushing the footer down */
  #content {
    flex: 1;
    margin-bottom: 30px; /* This adds space between login content and footer */
  }
  
  /* Ensure the footer doesn't add extra top space */
  #footer {
    margin-top: 0;
  }
  

Important Note #

Always avoid modifying the core asylum.css file directly if possible—use your theme's built-in custom CSS section (if available) or add a custom CSS file to your theme. This prevents your changes from being overwritten when you update the theme.

内容的提问来源于stack exchange，提问作者franfran00