Question

我正在使用bootstrap 4属性，但是当身体的高度较大时，页脚会卡在中间。

请让我知道是否需要任何CSS代码。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<header id="fh5co-header" class="fh5co-cover js-fullheight" role="banner">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      {% if messages %} {% for message in messages %}
      <div class="alert alert-{{ message.tags }}">
        {{ message }}
      </div>
      {% endfor %}
      <meta http-equiv="refresh" content="2"> {% endif %} {% block content %} {% endblock %}

    </div>
  </div>
</header>


<footer id="fh5co-footer" role="contentinfo">
  <div class="container">


    <div class="row copyright">
      <div class="col-md-12 text-center">
        <p>
          <small class="block">&copy; 2019 . All Rights Reserved.</small>
        </p>
      </div>
    </div>

  </div>
</footer>
</div>

Answer 1

固定在页面底部的页脚。尝试此代码段

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: #000;
  text-align: center;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<header id="fh5co-header" class="fh5co-cover js-fullheight" role="banner">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            {% if messages %} {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
            {% endfor %}
            <meta http-equiv="refresh" content="2"> {% endif %} {% block content %} {% endblock %}

        </div>
    </div>
</header>

<footer id="fh5co-footer" role="contentinfo" class="footer">
    <div class="container">

        <div class="row copyright">
            <div class="col-md-12 text-center">
                <p>
                    <small class="block">&copy; 2019 . All Rights Reserved.</small>
                </p>
            </div>
        </div>

    </div>
</footer>

页脚显示在页眉中

1 个答案: