如何使用CSS实现全屏显示并符合RWD要求 解决背景不全与文字溢出问题

• 黄色背景显示不全：.join_bg容器内的标题元素大量使用position: absolute脱离正常文档流，父容器没有设置对应高度或内边距承接内容，导致高度塌陷，背景仅能覆盖正常文档流内的按钮、分享图标等元素的高度范围。
• 文本溢出异常：标题文字的偏移量全部使用固定像素值硬编码，demo3的right: -92px设置直接将JOIN文本推出容器可视区，不同宽度的移动端下适配性极差，自然出现溢出问题。

核心修改点如下：

1. 为.join_bg添加上下内边距，撑开容器高度保证背景完整显示
2. 重构标题布局，放弃绝对定位偏移的写法，改用flex原生对齐，避免元素脱离文档流，同时天然适配不同宽度
3. 新增媒体查询针对375px、414px宽度调整字体大小和布局，满足RWD要求

修改后的完整CSS代码：

/* 全局先加盒模型重置，避免padding撑宽容器 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.join {
  width: 100%;
  padding: 0 16px;
}
.join .join_bg {
  width: 100%;
  background-image: url("https://en.pimg.jp/062/480/714/1/62480714.jpg");
  background-size: cover;
  background-position: center;
  /* 添加上下内边距撑出背景空间 */
  padding: 40px 0 30px;
}
.join .join_content {
  width: 100%;
}
.join .join_content .join_title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 37px;
  font-family: NotoSansCJKtc-Black;
}
/* 重构TOTAL、JOIN文本样式，去掉绝对定位偏移 */
.join .join_content .join_title .demo,
.join .join_content .join_title .demo3 {
  font-size: 24px;
  position: relative;
  color: #fff;
}
.join .join_content .join_title .demo::before,
.join .join_content .join_title .demo3::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke-width: 4px;
  -webkit-text-stroke-color: #000;
  z-index: 1;
}
.join .join_content .join_title .demo::after,
.join .join_content .join_title .demo3::after {
  content: attr(data-text);
  position: relative;
  z-index: 2;
}
/* 重构数字99999样式，避免脱离父容器文档流 */
.join .join_content .join_title .demo2 {
  position: relative;
  line-height: 1;
}
.join .join_content .join_title .demo2 h2 {
  font-size: 36px;
  font-weight: 900;
  position: relative;
  line-height: 1;
}
.join .join_content .join_title .demo2 .border1 {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke-width: 16px;
  -webkit-text-stroke-color: black;
  z-index: 1;
}
.join .join_content .join_title .demo2 .border2 {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke-width: 11px;
  -webkit-text-stroke-color: white;
  z-index: 2;
}
.join .join_content .join_title .demo2 .border3 {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  z-index: 3;
}
.join .join_content .join_title .demo2 .no-border {
  position: relative;
  z-index: 4;
}
.join .join_content .join_sing {
  width: 167px;
  height: 50px;
  display: block;
  margin: 0 auto 29px;
}
.join .join_content .join_sing img {
  width: 100%;
}
.join .join_content .join_subtitle {
  display: block;
  width: 90%;
  text-align: center;
  margin: 0 auto;
}
.join .join_content .join_share {
  display: flex;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 26px;
  gap: 18px;
}
.join .join_content .join_share .join_line {
  position: relative;
}
.join .join_content .join_share .join_line .line_icon {
  width: 106px;
  height: 43px;
}
.join .join_content .join_share .join_line .line_share_num {
  position: absolute;
  top: 3%;
  left: 67%;
  display: inline-block;
  padding: 0 6px;
  background-color: red;
  font-size: 10px;
  z-index: 99;
  border: 1px solid #222;
  color: #fff;
  border-radius: 20px;
}
.join .join_content .join_share .join_fb {
  position: relative;
}
.join .join_content .join_share .join_fb .fb_icon {
  width: 106px;
  height: 43px;
}
.join .join_content .join_share .join_fb .fb_share_num {
  position: absolute;
  top: 7%;
  right: -2%;
  display: inline-block;
  padding: 0 6px;
  background-color: red;
  font-size: 10px;
  z-index: 99;
  border: 1px solid #222;
  color: #fff;
  border-radius: 20px;
}
/* RWD适配规则 */
/* 适配414px宽度 */
@media screen and (max-width: 414px) {
  .join .join_content .join_title .demo,
  .join .join_content .join_title .demo3 {
    font-size: 22px;
  }
  .join .join_content .join_title .demo2 h2 {
    font-size: 32px;
  }
}
/* 适配375px宽度 */
@media screen and (max-width: 375px) {
  .join .join_content .join_title .demo,
  .join .join_content .join_title .demo3 {
    font-size: 20px;
  }
  .join .join_content .join_title .demo2 h2 {
    font-size: 28px;
  }
  .join .join_content .join_share {
    flex-direction: column;
    align-items: center;
  }
  .join .join_content .join_share .join_line {
    margin-right: 0;
    margin-bottom: 12px;
  }
}

对应HTML标题部分需要同步修改，将文本存入data属性：

<section class="join">
    <div class="join_bg">
                <div class="join_content">
                    <div class="join_title">
                        <div class="demo" data-text="TOTAL"></div>
                        <div class="demo2">
                            <h2 class="border1">99999</h2>
                            <h2 class="border2">99999</h2>
                            <h2 class="border3">99999</h2>
                            <h2 class="no-border">99999</h2>
                        </div>
                        <div class="demo3" data-text="JOIN"></div>
                    </div>
                    <a href="javascript:;" class="join_sing">
                        <img src="https://imgcdn.wangyeyixia.com/aHR0cDovL3d3dy5wbmdtYXJ0LmNvbS9maWxlcy84L1VwZGF0ZS1CdXR0b24tUE5HLUhELVF1YWxpdHkucG5n.png?w=700&webp=1" alt="簽到送早餐">
                    </a>
                    <img class="join_subtitle" src="/img/activity/2021_newSemester/首屏按鈕/資產%2051.svg" alt="">
                    <div class="join_share">
                        <a class="join_line" href="javascript:;">
                            <img class="line_icon" src="https://do.lnwfile.com/_/do/_raw/v3/8j/su.png" alt="">
                            <span class="line_share_num">9999</span>
                        </a>
                        <a class="join_fb" href="javascript:;">
                            <img class="fb_icon" src="https://do.lnwfile.com/_/do/_raw/v3/8j/su.png" alt="">
                            <span class="fb_share_num">0000</span>
                        </a>
                    </div>
                </div>
            </div>
</section>

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