Bootstrap 4 Нижний колонтитул не размещен внизу - PullRequest
Новая
       3

Bootstrap 4 Нижний колонтитул не размещен внизу

0 голосов
/ 23 января 2020

Я хотел бы создать простую главную страницу с разделом нижнего колонтитула, используя bootstrap-4. В этом примере у меня есть основной раздел и раздел нижнего колонтитула, который в коде находится ниже основного раздела и также имеет стиль bottom: 0;, но странным образом в браузерном или мобильном виде он находится в середине экрана.

Пример JSFiddle

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%;
}

Ответы [ 2 ]

2 голосов
/ 23 января 2020

изменить 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/

0 голосов
/ 23 января 2020

Это потому, что содержание вашей страницы маленькое и не занимает всю высоту страницы, вы можете сделать position:relative;, а затем сделать bottom:0;

...