html - 在其中添加图像时，Div 高度未填满屏幕大小

Question

我在 div 中添加了两个带有文本的图像，它应该占据屏幕的整个左侧。当我在底部添加第二张图片时。一半的图像超出了 div 并且 div 的高度没有扩展。屏幕截图是我得到的输出

代码如下:

<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>

@import url('https://fonts.googleapis.com/css?family=Kanit|Lobster|Mansalva&display=swap');

.App {
  font-family: 'Lobster', sans-serif;
  text-align: center;
  display: table;
}

.First-Half {
  background-color: red;
  position: absolute;
  left: 0px;
  height: 100%;
  width: 50%;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.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);
}

.Lacazette-Image img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.8;
  border: solid 1px #707070;
}

.Celebrate-Image img{
  position: absolute;
  width: 100%;
  top: 67%;
  left: 0;
  opacity: 0.8;
  border: solid 1px #707070;
}

https://codesandbox.io/s/crazy-bhaskara-6pj9y

Answer 1

通过使用

position: absolute;

在图像上，您将它们从页面流中移除，父 div 将不会随着它们一起增长。您应该考虑使用 Flexbox 而不是使用绝对定位进行布局。或 CSS Grid .这些也将帮助您创建一个响应式网站，该网站将在不同尺寸的设备上运行良好。

这是一个如何使用 Flexbox 进行布局的简短示例:https://jsfiddle.net/9swka2gL/

编辑:我喜欢@novruzrhmv 所说的，但如上例所示，我建议保留整个 <h1>如果可能的话，放在一起，既是出于 SEO 的原因，也是为了让您在移动设备上折叠到 1 列时更容易。一种方法是仅强制 h1 包装器溢出列，如上例所示。