如何让首页轮播图自适应视口并始终贴合视口底部？

Hey there! I see you're trying to get your carousel to stick to the bottom of the viewport no matter the window size, and you've already started with some jQuery code. Let's refine this to make it work reliably.

First: Fix Your Existing JavaScript Approach #

Your current code calculates the height once on page load, but it doesn't update when the window is resized. Here's how to fix that, plus add a debounce to avoid performance issues from too many resize events:

// Function to set carousel height
function setCarouselHeight() {
  const navHeaderHeight = 115; // Your fixed nav + header height
  const viewportHeight = $(window).innerHeight();
  const carouselHeight = viewportHeight - navHeaderHeight;
  
  $('.slides_show, .slides').height(carouselHeight);
}

// Run on page load
$(document).ready(setCarouselHeight);

// Run on window resize (with debounce to avoid jank)
let resizeTimeout;
$(window).on('resize', function() {
  clearTimeout(resizeTimeout);
  resizeTimeout = setTimeout(setCarouselHeight, 250); // Wait 250ms after last resize event
});

Even Better: Use Pure CSS (No JavaScript Needed) #

If your nav + header height is fixed at 115px, you can skip JavaScript entirely with CSS viewport units and calc(). This is more efficient and avoids potential JS timing issues:

/* Set carousel containers to fill remaining viewport space */
.slides_show, .slides {
  height: calc(100vh - 115px);
  width: 100%;
  overflow: hidden; /* Prevent unwanted scrollbars if content overflows */
}

/* Ensure carousel images fit properly without stretching */
.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Preserves image aspect ratio while filling the container */
}

Key Notes to Keep in Mind #

• If your nav/header height isn't fixed (e.g., it changes on mobile), stick with the JS approach and dynamically calculate the nav height instead of hardcoding 115px. For example: const navHeaderHeight = $('nav, .header').outerHeight(true); (the true includes margins).
• Double-check that there's no unintended padding/margins on the carousel container or parent elements that could push it off-position—use your browser's dev tools to inspect the box model.
• object-fit works in all modern browsers, but if you need to support very old ones, use a fallback like background images with background-size: cover instead of <img> tags.

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