WordPress网站内容不显示求助：仅页眉页脚可见

Hey there, let's tackle this annoying issue head-on—nothing's more frustrating than tweaking CSS for full-width headers/footers only to watch your page content vanish, right? Since you've already ruled out page.php edits and plugin conflicts, let's focus on the CSS changes that triggered this:

1. Hunt for Accidental Content Hiding in CSS #

Your CSS tweak for full-width headers/footers likely messed up the content container's display rules. Here's how to spot it:

• Fire up your browser's DevTools (hit F12), then use the element picker to select the area where your content should be.
• Check the CSS panel for these red flags:
  • display: none; or visibility: hidden; (these directly hide elements)
  • opacity: 0; (makes content invisible even though it's still there)
  • Negative margin/padding values that push content outside the viewport
  • A low z-index that lets headers/footers cover up the content
• Temporarily uncheck these suspect rules—if your content pops back up, adjust the values (e.g., swap display: none for display: block, or bump up the z-index).

2. Fix Floating Layout Collapses #

Full-width layouts often use floats, which can cause parent containers to collapse (making content look like it's gone even if it exists):

• Check if the content container's parent has a float property but no clearfix to contain it.
• Try adding this clearfix CSS to your stylesheet, then apply the clearfix class to the content's parent element:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Alternatively, add clear: both; directly to your content container's CSS to break out of floating parent elements.

3. Check CSS Selector Priority Issues #

Sometimes broad CSS selectors from your full-width tweak end up overriding the content's display styles. Here's how to fix it:

• Compare the HTML structure of the one working page vs. the broken ones. Look for differences in content container classes/IDs (e.g., the working page might have .page-content.active while others just have .page-content).
• Adjust your CSS to target the content more specifically. For example, use body.page .page-content instead of just .page-content to ensure your display rules take precedence over any accidental overrides.

4. Fix Overflow Clips #

Full-width layouts sometimes use overflow: hidden on outer containers to handle edge-to-edge styling, but this can clip content that extends beyond the container's height:

• Look for outer containers (like #site or .page-wrap) with overflow: hidden; or height: 100vh;.
• Try swapping overflow: hidden for overflow: visible, or change height: 100vh to min-height: 100vh—this lets the container expand to fit your content instead of cutting it off.

5. Roll Back & Test Incrementally #

If you have a backup of your CSS before the full-width tweak, restore it first to confirm content shows up again. Then, re-add your full-width header/footer CSS line by line, refreshing the page after each change. This will let you pinpoint exactly which line caused the content to disappear, so you can adjust that specific rule instead of rewriting everything.

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