CSS布局需求：三列并排及图片拉伸至页面底部

Alright, let's break down how to fix both your layout problems—getting those three columns to sit side-by-side, and making your homepage image stretch to the bottom of the viewport when the browser isn't maximized.

1. Fixing the Three-Column Layout #

Your current code uses display: inline for both .row and .third-col, but this can cause spacing inconsistencies and lacks proper layout control. A more reliable approach is using Flexbox (modern and easy to maintain) or a float-based layout for legacy support. Here's how to adjust your code:

Updated CSS for Columns #

/* Reset default margins/paddings to avoid unexpected spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row {
  padding: 0 20px;
  display: flex; /* Flexbox handles side-by-side alignment seamlessly */
  gap: 3%; /* Adds consistent space between columns (matches your 30.3% width) */
  flex-wrap: wrap; /* Optional: Wraps columns on smaller screens for responsiveness */
}

.third-col {
  width: 30.3%;
  font-size: 16px;
  /* No need for display: inline anymore—flex takes care of alignment */
}

/* Float-based fallback for older browsers (replace flex code above if needed): */
/*
.row {
  padding: 0 20px;
  overflow: hidden; /* Clears float so your contact div sits below */
}

.third-col {
  width: 30.3%;
  font-size: 16px;
  float: left;
  margin-right: 3%;
}

.third-col:last-child {
  margin-right: 0; /* Removes extra margin from the final column */
}
*/

Updated HTML (Ensure Three Columns Exist) #

<img class="center" src="homepage.jpg" alt="Homepage hero image">
<section id="skills">
  <p class="header">My Skills</p>
  <div class="skillsContainer">
    <div class="row"> <!-- Switched id="row" to class="row" to match your CSS selector -->
      <div class="third-col">
        <ul>
          <li>Skill Item 1</li>
          <li>Skill Item 2</li>
        </ul>
      </div>
      <div class="third-col">
        <ul>
          <li>Skill Item 3</li>
          <li>Skill Item 4</li>
        </ul>
      </div>
      <div class="third-col">
        <ul>
          <li>Skill Item 5</li>
          <li>Skill Item 6</li>
        </ul>
      </div>
    </div>
  </div>
</section>
<!-- Your contact div will now automatically sit below the row -->
<div class="contact">
  <!-- Contact content here -->
</div>

Key fixes here:

• Changed id="row" to class="row" (IDs should be unique, and your CSS targets a class)
• Used Flexbox for clean, responsive column alignment (or provided a float fallback)
• Added consistent spacing between columns without breaking the layout

2. Stretching the Homepage Image to the Viewport Bottom #

To make your image reach the bottom of the page when the window isn't maximized, you need to ensure the root elements and image container take up the full viewport height. Here's the adjusted CSS:

Updated CSS for the Hero Image #

/* Force html and body to fill the entire viewport */
html, body {
  height: 100%;
  min-height: 100vh;
  margin: 0;
}

.center {
  padding: 0;
  display: block;
  width: 100%; /* Stretch image to full page width */
  height: 100vh; /* Make image take full viewport height */
  object-fit: cover; /* Maintains image aspect ratio while filling the viewport (no distortion) */
  /* Use object-fit: contain; instead if you want the entire image visible (adds letterboxing if needed) */
}

If you don't mind distorting the image to fit perfectly, replace object-fit: cover with height: 100%; width: 100%;—but object-fit: cover is almost always the better choice for hero images to preserve quality.

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