HTML / CSS Calc / Flexbox 定位问题

Question

我一直在尝试制作一个具有 3 个水平部分的页面，中间部分的内容与其上方和下方的部分重叠。中间部分的内容是使用flex排列的。

我尝试设置上面中间部分内容

100px

的位置，并使用

calc

将内容的高度设置为

100% - 200px

，但没有得到想要的效果。

这就是我正在努力的目标：

这是我正在使用的 HTML/CSS：

* {
  margin: 0px;
  padding: 0px;
}

.sectionClass {
  min-height: 300px;
}

#section01 {
  background-color: aquamarine;
  height: 300px;
}

#section02 {
  background-color: brown;
}

#section03 {
  background-color: purple;
  height: 300px;
}

#mainContainer {
  position: relative;
  top: -100px;
  height: calc(100% - 200px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.sectionItem {
  max-width: calc(100% / 6);
  margin: 10px;
  border: 1px solid #222;
}

.sectionItem p {
  font-size: 14px;
}

<body>
  <div id="section01" class="sectionClass"></div>
  <div id="section02" class="sectionClass">
    <div id="mainContainer">
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="sectionItem">
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
  </div>
  <div id="section03" class="sectionClass"></div>
</body>

任何人都可以建议我哪里出错了吗？

提前致谢。x

这就是我得到的：

Answer 1

尝试删除

#section03{
    background-color: purple;
    height: 300px; <-
}

如果这不起作用，请尝试添加溢出：隐藏在第03节中，或者您可以尝试使用第2节，但要使其带有边距-，如果这没有帮助，请随时给我发电子邮件。

HTML / CSS Calc / Flexbox 定位问题

问题描述投票：0回答：1

1个回答

最新问题

HTML / CSS Calc / Flexbox 定位问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1