Question

在 body 中

我有部分 ...我期望身体获得整个身高：section1.height + section2.height + ..但它只能获得顶部高度。我错过了什么？ jsfiddle

<!-- Header -->
<section id="top">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">header</div>
    </div>
  </div>
</section>

<!--mission-->
<section id="mission" class="mission">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">mission</div>
    </div>
  </div>
</section>

<!-- contact -->
<section id="contact" class="contact">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">contact</div>
    </div>
  </div>
</section>

Answer 1

您正在寻找html和正文的min-height。使用height: 100%可使html和body高度环绕您的所有内容，最高可达屏幕/视口的高度。使用min-height: 100%会使html和body height等于至少屏幕/视口的高度，并且还可以向下展开以适应溢出的内容。

JSFiddle

html, body {
    min-height: 100% !important;
    width: 100% !important;
    margin: 0;
    padding: 0;
}

注意 - 除非绝对必要，否则请尽量避免使用!important。如果/当您需要覆盖单个页面的样式时，它将在未来产生问题。

Answer 2

您可以使用section.top将标题100vh设置为视口高度。然后，您可以删除height: 100% html和body html,body{ margin:0; padding:0 ; } #top { width: 100%; height: 100vh; background: #802818; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }，它们会保持流畅（fiddle）：

{{1}}

单页身高

2 个答案: