将页脚放在页面末尾。引导程序答案

【问题标题】：Place footer at the end of page. Bootstrap将页脚放在页面末尾。引导程序
【发布时间】：2019-09-17 04:18:37
【问题描述】：

我想在页面末尾放置页脚（如果有一些文本）。因此我将 h-100 添加到容器中

<div class="container h-100" style="margin:40px;"> <!-- wrapper for all containers -->

但是当我在页面上有很多数据时，页脚与这些数据相交。我该如何解决？图片上的示例（黑线是页脚）

我的代码

{% extends 'vacancy_list/base.html' %}

{% block content %}

<div class="container h-100" style="margin:40px;"> <!-- wrapper for all containers -->
    {% for vacancy in vacancies %}
    <div class="card">
        <div class="card-header">
            <div class="row">
                <div class="col-md-8">
                    <h1><a href="#">{{vacancy.title}}</a></h1>
                </div>
                <div class="col-md-4 text-right">
                    <p> 40000 </p>
                </div>
            </div>
        </div>
        <div class="card-body" style="white-space:normal">
            <p> Описание вакансии: Компания Sixhands, занимающаяся разработкой мобильных приложений и веб-порталов в Санкт-Петербурге, ищет Backend-разработчика для создания серверной части мобильных приложений.
        </div>


    </div>
    {% endfor %}
</div> <!-- wrapper end -->

{% endblock %}

【问题讨论】：

您能否进一步描述一下您希望您的页脚在您的内容结束的位置？或视口结束的地方
@ibnelaiq，我想要页尾的页脚
@alcoder.我只是在下面回答你的问题..（虚拟文本是你的内容）。

标签： html css bootstrap-4

【解决方案1】：

这段代码帮助了我

<head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        html,
    body {
      height: 100%;
    }

    #page-content {
      flex: 1 0 auto;
    }

    #sticky-footer {
      flex-shrink: none;
    }


    body {
      background: #007bff;
      background: linear-gradient(to right, #0062E6, #33AEFF);
    }
    </style>
</head>

<body class="d-flex flex-column">
  <div id="page-content">
    <div class="container text-center">
      <p> TEXT
    </div>
  </div>
  <footer id="sticky-footer" class="py-4 bg-dark text-white-50">
    <div class="container text-center">
      <small>Copyright &copy; Your Website</small>
    </div>
  </footer>
</body>

【讨论】：

【解决方案2】：

您需要一个粘性页脚。实现这一点的一种方法是将整个页面变成一个 Flexbox：

html,
body {
  height: 100%;
  margin: 0;
}

header {
  background: yellow;
}

main {
  background: pink;
}

footer {
  background: lightblue;
}

body {
  display: flex;
  flex-flow: column;
}

main {
  flex: 1;
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

【讨论】：

他不想制作粘性页脚，而是想在他的文本或内容结束的地方制作页脚......您的解决方案很好，但对他的问题没有多大帮助。
@ibnelaiq 这就是粘性页脚的作用。它出现在视口的底部，除非文本内容溢出视口，在这种情况下它会出现在文本内容的末尾。