添加图片后Div高度无法铺满屏幕的技术问题

Hey there! I see the problem you're facing—your second image is spilling outside the red container, and the container isn't expanding to fit its content. Let's break down why this happens and fix it step by step.

What's Causing the Issue? #

The root problem boils down to two key choices in your CSS:

• Your .First-Half and .wrapper elements have height: 100% set, locking them to the viewport height instead of letting them grow with their content.
• Both images use position: absolute, which takes them out of the normal document flow. This means the container doesn't "register" their height, so it won't expand to fit them.

The Solution #

Here's how to adjust your code to make the container fit all content while keeping it anchored to the left half of the screen:

Updated HTML (no changes needed here, included for reference) #

<section className="App">
  <div className="First-Half">
    <div className="wrapper">
      <div className="Lacazette-Image">
        <img alt="Lacazette" src={Lacazette}></img>
      </div>
      <div className="Arsenal-Fans">
        Arsenal Fans
      </div>
      <div className="Celebrate-Image">
        <img alt="Celebrations" src={Celebrations}></img>
      </div>
    </div>
  </div>
</section>

Updated CSS #

@import url('https://fonts.googleapis.com/css?family=Kanit|Lobster|Mansalva&display=swap');
.App {
  font-family: 'Lobster', sans-serif;
  text-align: center;
  /* Removed display: table since it's unnecessary here */
}
.First-Half {
  background-color: red;
  /* Replaced position: absolute with float: left to keep it left-aligned while allowing height to grow */
  float: left;
  width: 50%;
  /* Removed height: 100% so the container adapts to content */
}
.wrapper {
  width: 100%;
  position: relative; /* Kept this to maintain absolute positioning for the text */
}
.Arsenal-Fans {
  position: absolute;
  height: 50px;
  left: 74%;
  top: 58%;
  font-family: 'Lobster', sans-serif;
  font-size: 55px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.22;
  letter-spacing: normal;
  text-align: left;
  color: rgba(249, 246, 246, 0.97);
  z-index: 10; /* Added to ensure text stays visible above images */
}
.Lacazette-Image img{
  /* Removed position: absolute to put the image back in the document flow */
  width: 100%;
  opacity: 0.8;
  border: solid 1px #707070;
}
.Celebrate-Image img{
  /* Removed position: absolute and top/left to keep it in the flow */
  width: 100%;
  opacity: 0.8;
  border: solid 1px #707070;
}

Key Changes Explained: #

1. Removed fixed heights: By ditching height: 100% from .First-Half and .wrapper, the container now expands vertically to fit all its content.
2. Swapped absolute positioning for float: Using float: left on .First-Half keeps it anchored to the left 50% of the screen while letting its height adjust naturally.
3. Restored images to normal flow: Taking position: absolute off the images makes the container recognize their height, so it wraps around them properly.
4. Added z-index to text: If you want the "Arsenal Fans" text to sit over the images, keeping position: absolute and adding z-index:10 ensures it stays visible above the images.

If you need the images to overlap each other specifically, we can tweak the approach—just let me know! But for the issue you described, this should fix the overflow and container height problem.

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