时间戳

首页 > 解决方案 > Float 无法覆盖我的整个背景。这是为什么？

html - Float 无法覆盖我的整个背景。这是为什么？

问题描述

我的 html 文件中有两个 div，宽度均为 50%。左边的位置是固定的，右边的位置必须是滚动的。我把它设为浮动。问题是，我的浮动 div 背景周围有一个空白区域：

我的代码：

for (i = 0; i < 100; i++) {
  document.write(" <br>");
}
.left {
  flex: 1;
  left: 0;
  width: 50%;
  background-color: #ffc30b;
  height: 100vh;
  position: fixed;
  top: 0;
}

.left p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.right {
  background-size: cover;
  width: 50%;
  background-color: black;
  float: right;
}
<body>
  <section id="about">
    <div class="left">
      <p class="header">ABOUT</p>
    </div>

    <div class="right">
      <div class="aboutimg"><img src="img.png" alt="me|Jessa" width="200" height="200" /></img>
      </div>

    </div>
  </section>
</body>

在此处输入图像描述

标签： htmlcss

解决方案

尝试添加这个

body {
  margin: 0;
}

推荐阅读