使 section 和 main 的高度与其内容相同（整页）

Question

有没有办法让我的部分与其内容高度相同？我试图将部分更改为 section fp-auto-height，但该部分最终将整个页面压缩为 30px。尽管我的内容在 section 范围内且具有预设高度。

.mainupp {
  background-color: #e8e8e8;
}
#main {
  position: relative;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
}
#mid-text {
  margin: auto;
  text-align: left;
  position: absolute;
  top: 10%;
  width: 100%;
  height: 300px;
  background-size: auto;
}
.dark-text p {
  font-size: 14pt;
  color: #7e7e7e;
  font-family: Calibri;
  line-height: 130%;
  display: inline;
}

<div class="section fp-auto-height" data-menuanchor="thirdPage">
  <div class="slide">
    <div id="main" class="mainupp">
      <div id="myheader" class="border"></div>
      <div class="container-fluid height-full">
        <div class="row">
          <div id="head-text">
            <div class="col-sm-5"></div>
            <div class="col-sm-2">
              <h2>sdfsdfsdf</h2>
            </div>
            <div class="col-sm-5"></div>
          </div>
        </div>
        <div class="row">
          <div id="mid-text" class="dark-text">
            <div class="col-sm-5"></div>
            <div class="col-sm-3">
              <p>asd asd asd as das dasdas d asd as d asd as d asd as d asd as da sd asdasdasdasd as d asdas das d asdasdasd asdas da sd asd as da sd asd as d as asdasdasdasdasd</p>
            </div>
            <div class="col-sm-4"></div>
          </div>
        </div>
      </div>
      <div id="meny" class="menyupp"></div>
    </div>
  </div>

Answer 1

那是因为您正在使用 position: absolute。在该部分中使用一个容器并在该容器中设置高度。

<div class="section">
    <div class="my-container">
       WHATEVER HERE
     </div>
</div>

然后在 css:

.my-container{
     height: 1200px;
}

使 section 和 main 的高度与其内容相同（整页）

Make section and main the same height as it's content (fullpage)

html

css

fullpage.js