如何用CSS实现右侧列与左侧图片列等高？示例：jsfiddle.net/robtndfy

Hey there! I've got you covered with a pure CSS solution using Grid and Flexbox—no jQuery required. This will handle both scenarios you described perfectly: scrolling when comments exceed the image height, and filling the space down to the bottom section when content is shorter.

Step 1: HTML Structure #

First, let's set up a clean, semantic structure that supports our layout needs:

<div class="page-container">
  <!-- Fixed-height top section -->
  <header class="top">Top Section (Fixed 80px)</header>
  
  <!-- Main content area (image + comments) -->
  <main class="main-content">
    <div class="image">
      <img src="your-image-url.jpg" alt="Featured Image">
    </div>
    <div class="comments-wrapper">
      <div class="comments">
        <!-- Your comment content goes here -->
        <p>Great post! Thanks for sharing.</p>
        <p>I have a question about this topic...</p>
        <!-- Add more comments to test scrolling -->
      </div>
    </div>
  </main>
  
  <!-- Fixed-height bottom section -->
  <footer class="bottom">Bottom Section (Fixed 80px)</footer>
</div>

Step 2: CSS Implementation #

Here's the CSS that makes everything work. I'll break down the key parts so you understand why each rule matters:

/* Base styles to ensure full viewport height */
html, body {
  height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* Vertical flex container for the entire page */
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Fixed height top and bottom sections */
.top, .bottom {
  height: 80px; /* Total 160px, matching your jQuery value */
  flex-shrink: 0; /* Prevent these sections from being compressed */
  background: #f0f0f0;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

/* Grid layout for the main content (image + comments) */
.main-content {
  display: grid;
  grid-template-columns: auto 1fr; /* Image column fits content, comments take remaining space */
  flex-grow: 1; /* Fill remaining space between top and bottom */
  min-height: 0; /* Critical: Allows the grid to shrink properly if content overflows */
  gap: 1.5rem; /* Space between image and comments */
  padding: 1.5rem;
  box-sizing: border-box;
}

/* Image section styling */
.image {
  flex-shrink: 0;
}
.image img {
  display: block;
  max-height: 100%; /* Ensure image doesn't exceed the main content area */
  height: auto;
  border-radius: 4px;
}

/* Comment section container */
.comments-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%; /* Ensure comments fill the main content height when content is short */
}

/* Scrollable comment area */
.comments {
  flex-grow: 1; /* Take all available space in the wrapper */
  overflow-y: auto; /* Enable vertical scrolling when content exceeds the container height */
  padding: 1rem;
  background: #f9f9f9;
  border-radius: 4px;
}

How This Works #

• Vertical Page Layout: The page-container uses Flexbox to stack the top, main, and bottom sections vertically. flex-grow: 1 on main-content ensures it fills all space between the fixed-height top and bottom.
• Equal Height Columns: Grid layout for main-content makes the image and comment columns automatically match heights—so the comment section will always match the image's height (or the main content height, whichever is smaller).
• Dynamic Scrolling: The comments div uses flex-grow: 1 to fill available space and overflow-y: auto to add a scrollbar only when content exceeds the container height.
• Fill to Bottom: When comments are shorter than the image/main content height, min-height: 100% on comments-wrapper ensures the comment section stretches down to meet the bottom section.

This solution is responsive, doesn't require any JavaScript, and handles all edge cases (like image loading, window resizing) automatically—no need to update heights manually like with your jQuery code.

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