html - Bootstrap 4 Footer 没有放在底部

Question

我想使用 bootstrap-4 创建一个带有页 footer 分的简单主页。在这个例子中，我有一个主要部分和一个页 footer 分，它在代码中位于主要部分下方，并且还带有 bottom: 0; 但奇怪的是，在浏览器 View 或移动 View 中它位于屏幕中间。

JSFiddle Example

HTML:

    <div class="row">

      <div class="col-xs-12 col-md-6 mt-100">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some text some text Some text some textSome text some textSome text 
          some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text some textSome text  text some text Some text some textSome text  text some textSome text some textSome text text some textSome text some textSome
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>

  </div>
</section>

<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>

CSS:

html,
body {
  min-height: 100%;
  height: 100%;
}

.mt-100 {
  margin-top: 100px;
}

.main-image {
  width: 100%;
  height: 100vh;
  background-image: url("http://afreshstartmovingco.com/wp-content/uploads/2019/01/hd-wallpapers-1920x1080-nature-1-1568x882.jpg");
  background-size: cover;
  background-position: 0% 100%;
}

.page-footer {
  background-color: #343a40;
  color: white;
  padding: 30px 30px 30px 30px;
  position: relative;
  bottom: 0;
  width: 100%;
}

Answer 1

像改变你的 HTML 和 CSS 一样

   <!-- MAIN SECTION WITH BACKGROUND IMAGE-->
<div class="d-flex flex-column h-100"> /*Change HERE*/
<section class="main-image flex-fill">  /*Change HERE*/
  <!-- MAIN CONTENT-->
  <div class="container">
    <div class="row">

      <div class="col-xs-12 col-md-6">
        <h1 class="mb-4">Some Text</h1>
        <p style="text-align:justify;" class="lead">
          Some 
        </p>
      </div>

      <div class="col-xs-12 col-md-6 mt-100">
        <div class="text-center">
          <p>
          Some more Text Some more Text Some more TextSome more TextSome more TextSome more TextSome more TextSome more Text
          </p>
        </div>
      </div>

    </div>
  </div>

</section>

<!-- FOOTER SECTION-->
<section>
  <footer class="page-footer">
    <p class="text-center">THIS IS THE FOOTER</p>
  </footer>
</section>
</div>  /*Change HERE*/


html,
body {
  min-height: 100%;
  height: 100%;
}


.mt-100 {
  margin-top: 100px;
}


.main-image {
  width: 100%;
  height: 100vh; /* remove this*/
  /* responsive */
  background-image: url("http://afreshstartmovingco.com/wp-content/uploads/2019/01/hd-wallpapers-1920x1080-nature-1-1568x882.jpg");
  background-size: cover;
  background-position: 0% 100%;
}


.page-footer {
  background-color: #343a40;
  color: white;
  padding: 30px 30px 30px 30px;
  position: relative;
  bottom: 0;
  width: 100%;
  /* min-height:10vh; */
}

https://jsfiddle.net/lalji1051/27y53fzp/5/