html - 页面顶部的最小边距

Question

我有 2 个部分，100% 高度和 100% 宽度，尽管第一部分有背景 img。当调整浏览器窗口的大小时，当它从第二部分达到某个高度时 div 元素开始与第一部分重叠。是否可以设置从 div 到页面顶部的最小边距？

CSS

section {
  width: 100%;
  height: 100vh;
}

.main section.page1 {
  background: rgb(97,66,52);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/2880px-Image_created_with_a_mobile_phone.png");
  background-repeat: no-repeat;
  background-position: center;
}

.main section.page2 {
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.form-parent {
  border: 1px solid #9D9D9D;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  height: 400px;
  width: 500px;
  padding: 10px;
}

<div class="main">
  <div id="home">
    <section class="page1">
    </section>
  </div>
  <section class="page2">
    <div id="order">
      <div class='form-parent'>
      </div>
    </div>
  </section>
</div>

抱歉，代码混乱。

标签： htmlcss

Answer 1

我查看了代码，发现如果您将部分 css 设置为

section {
 width: 100%;
 min-height: 100vh;
 }

表单父 div 不重叠