页面布局技术求助：表格无法居中、内容溢出、Footer无法固定底部

Let's tackle each of your issues one by one, with corrected code and straightforward explanations:

1. Fix: Table Not Centering #

Your original .table class used invalid CSS (align: center is an HTML attribute, not valid CSS). To center the table reliably, we'll use margin: 0 auto on the table container, and ensure the table itself doesn't exceed its parent's width.

2. Fix: Image Table Overflowing Content Area #

Images inside the table were causing overflow because they had no responsive constraints. Adding max-width: 100%; height: auto; to images will make them scale with their container cells, preventing them from pushing the table outside the content area.

3. Fix: Footer Not Sticking to Page Bottom #

We'll use Flexbox for the main wrapper—this is a modern, reliable approach that pushes the footer to the bottom without fixed positioning (which can overlap content). We'll set the wrapper to fill the full viewport height and let the content sections take up available space, leaving the footer anchored at the bottom.

Corrected CSS Code #

body { 
  margin: 0; 
  padding: 0; 
  min-height: 100vh; /* Ensure body takes full viewport height */
}

.mainwrapper { 
  width: 1024px; 
  margin: 0 auto; 
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Match body's minimum height */
}

.pagebanner { 
  height: 250px; 
  margin: 0; 
}

.pagebanner img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; /* Prevent image distortion */
}

.main { 
  margin: 0; 
  display: flex; /* Replace floats with flex to avoid layout bugs */
}

.navbar { 
  background-color: brown; 
  min-height: 500px; 
  width: 20%; 
}

.navbar li { 
  list-style: none; 
  margin-bottom: 15px; 
}

.navbar a { 
  color: #fff; 
  font-size: 20px; 
}

.headersd { /* Fixed typo: matched the CSS class name to the HTML */
  width: 80%; 
  padding: 0; 
  min-height: 500px; 
}

.header { 
  background-color: #000; 
  text-align: center; 
}

.header h1 { 
  color: #fff; 
  margin: 0; 
}

.subheading { 
  background-color: #f8d631; 
  text-align: center; 
}

.subheading h2 { 
  margin: 0; 
}

.table { 
  margin: 20px auto; /* Center the table container */
  width: 90%; /* Prevent full-width stretch */
}

.table table {
  width: 100%; /* Make table fit its container */
  border-collapse: collapse; /* Clean up default table spacing */
}

.table img {
  max-width: 100%; /* Responsive scaling for images */
  height: auto;
}

.footer { 
  background-color: darkgreen; 
  height: 20px; 
  margin-top: auto; /* Push footer to bottom in flex layout */
  color: white; /* Improve text visibility */
  text-align: center;
}

Corrected HTML Code #

<div class="mainwrapper">
  <div class="pagebanner">
    <img src="https://cdn-images-1.medium.com/max/1400/1*278tqw9zNPe2WCAz29Wzdw.jpeg" alt="PageBanner">
  </div>
  <!--PageBanner-->
  <div class="main">
    <div class="navbar">
      <ul>
        <li>
          <a href="#">Information</a>
        </li>
        <li>
          <a href="#">Home</a>
        </li>
      </ul>
    </div>
    <!--Navbar-->
    <div class="headersd"> <!-- Fixed typo: matched CSS class name -->
      <div class="header">
        <h1>The Club Site</h1>
      </div>
      <!--Main page heading section-->
      <div class="subheading">
        <h2>Members Prices</h2>
      </div>
      <!--Sub heading section-->
    </div>
  </div>
  <div class="content">
    <div class="table">
      <table>
        <tr> <!-- Added missing <tr> around table header for valid HTML -->
          <th colspan="3">Discount Prices</th>
        </tr>
        <tr>
          <td><img src="https://imgur.com/S1JVX6K" alt="Discount Item 1"></td> <!-- Fixed unclosed img tag + added alt text -->
          <td><img src="https://imgur.com/uzkB81W" alt="Discount Item 2"></td>
          <td><img src="https://imgur.com/YvnOW4s" alt="Discount Item 3"></td>
        </tr>
        <tr>
          <td><img src="https://imgur.com/f2wnDXT" alt="Discount Item 4"></td>
          <td><img src="https://imgur.com/XiBYnS2" alt="Discount Item 5"></td>
          <td><img src="https://imgur.com/mGcCorr" alt="Discount Item 6"></td>
        </tr>
      </table>
    </div>
    <!--Table Section-->
  </div>
  <!--Content section-->
  <div class="footer">
    <footer>wsrgferg</footer>
  </div>
  <!--Footer section-->
</div>
<!--Endwrapper-->

Key Changes Breakdown: #

• Centered Table: Used margin: 0 auto on the .table container and set the table to fill its parent width, ensuring it stays centered without overflow.
• Responsive Images: Added max-width: 100%; height: auto to images so they scale with their cells, eliminating overflow.
• Sticky Footer: Converted .mainwrapper to a flex container with flex-direction: column, then used margin-top: auto on the footer to push it to the bottom. We also set min-height: 100vh on the body and wrapper to ensure the layout fills the viewport.
• HTML Fixes: Corrected unclosed img tags, added a missing <tr> around the table header, and fixed the typo in the headersd class name to match the CSS.
• Layout Improvements: Replaced float-based layout for the main content with Flexbox to avoid clearfix issues and ensure consistent spacing.

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