如何在不使用Width:100vw的情况下实现Div及标题背景全屏且H2居中

Got it, let's break down each of your requirements with concrete, WordPress-friendly solutions tailored to your Portfolio template:

1. Implement Full-Screen Div Element #

To make a <div> fill the entire viewport reliably, use this CSS approach—works whether you want it fixed in place or part of the document flow:

/* Target your full-screen div (adjust the selector to match your actual class/id) */
.full-screen-div {
  position: fixed; /* Use `absolute` instead if you want it in the page flow */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  z-index: 999; /* Optional: add if you need it above other content */
}

If you go with position: absolute, just make sure its parent container doesn't have overflow: hidden or constrained positioning that would clip it.

2. Full-Screen Title Background (No width:100vw) #

100vw can cause horizontal scrolling when vertical scrollbars are present. Instead, use this margin trick to stretch the background across the viewport while keeping your content aligned with your site's grid:

/* Target your heading container */
#heading1.full {
  width: 100%;
  /* Pull the container left/right to fill the viewport */
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: #your-preferred-color; /* Replace with your actual background */
  padding: 2rem 0; /* Add vertical padding to space out content */
}

/* Keep the heading content aligned with your site's wrapper */
#heading1.full .heading-inner {
  max-width: 1200px; /* Match your site's main container width */
  margin: 0 auto;
  padding: 0 1rem; /* Add mobile-friendly horizontal padding */
}

Wrap your heading content (like the title) inside the .heading-inner div to keep it from stretching to the edges.

3. Center h2 Tags on the Portfolio Page #

WordPress adds template-specific classes to the <body> tag, so you can target h2s only on your Portfolio page without affecting other pages:

/* Target h2 tags exclusively on the Portfolio template */
body.page-template-portfolio h2 {
  text-align: center;
  margin: 1.5rem auto; /* Optional: adds vertical spacing and ensures block-level centering */
}

If your h2 has a fixed width, margin: 0 auto will center the block itself, while text-align: center centers the text inside it.

Adding Styles to Your Template #

You can drop these styles into your theme's style.css file, use the WordPress Customizer's Additional CSS section, or embed them directly in your Portfolio template like this:

<?php /* Template Name: Portfolio */ ?> 
<?php get_header(); ?> 

<style>
/* Full-screen div */
.full-screen-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

/* Full-screen heading background */
#heading1.full {
  width: 100%;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  background: #f5f5f5; /* Adjust to your site's color scheme */
  padding: 2rem 0;
}

#heading1.full .heading-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Centered h2 tags */
body.page-template-portfolio h2 {
  text-align: center;
}
</style>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
<div id="heading1" class="full">
  <div class="heading-inner">
    <?php the_title('<h1>', '</h1>'); ?>
  </div>
</div>

<!-- Rest of your template content here -->

<?php endwhile; endif; ?> 
<?php get_footer(); ?>

Just adjust selectors, colors, and padding to match your site's existing design.

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