html - 阻止 Bootstrap 4 页脚上升-6ren

html - 阻止 Bootstrap 4 页脚上升

转载作者：行者123 更新时间：2023-11-28 14:30:21

我的 bootstrap 4 页脚在正文内容较少的页面上出现。

下面是问题的图片。

footerproblem

footer {
  background-color: white;
  color: #d5d5d5;
  padding-top: 1rem;
}
footer a {
  color: #d5d5d5;
}
hr.light-100 {
  border-top: 1px solid #d5d5d5;
  width: 100%;
  margin-top: .8rem;
  margin-bottom: 1rem;
  color: black;
}

<footer>
  <div class="container-fluid padding">
    <div class="row text-center">
      <div class="col-md-6">
        <p class="marker">blah blah blah.
        <a class="btn btn-social-icon btn-instagram">
         <span class="fa fa-instagram"></span>
        </a>
      </div>
      <div class="col-md-6">
        <p class="marker">more blah blah.
        <a class="btn btn-social-icon btn-facebook">
         <span class="fa fa-facebook"></span>
        </a>
        </p>
      </div>
      <div class="col-12">
        <hr class="light-100">
        <h5>&copy; app.com</h5>
      </div>
    </div>
  </div>

如果还有什么我忘记附上的，请告诉我，我会编辑帖子。

我玩过 footer: sticky;/fixed; 但这并不能解决问题。

页脚也太高了，但每当我添加 height css 变量时，高度都会降低，但文本会保留在原位。

funkyheight

非常感谢您的帮助。

最佳答案

解决此问题的正确方法是按如下方式布局页面:

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

使用以下 CSS:

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}
header, footer {
  flex-grow: 0;
}
main {
  flex-grow: 1;
}

无论是否使用 Bootstrap，这都适用，但如果您不使用 Bootstrap，您可能还需要

* { box-sizing: border-box; }

(已包含在 Bootstrap 中)。

这是一个使用 Bootstrap v4 的例子:

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
}
header, footer {
  flex-grow: 0;
}
main {
  flex-grow: 1;
}
footer {
  background-color: #eee;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

    <title>Hello, world!</title>
  </head>
  <body>
    <header>
  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>
<main role="main">
<div class="container">
    <h1>Hello, world!</h1>
    <div class="row">
      <div class="col">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam ut porttitor leo a. Metus dictum at tempor commodo. Feugiat vivamus at augue eget arcu dictum. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Elementum eu facilisis sed odio morbi quis commodo odio. Tempus egestas sed sed risus. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Eu ultrices vitae auctor eu augue ut. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus ornare. In pellentesque massa placerat duis. Bibendum enim facilisis gravida neque convallis.

<p>Nisi vitae suscipit tellus mauris a. Non blandit massa enim nec dui nunc. Hac habitasse platea dictumst vestibulum rhoncus. Vitae congue mauris rhoncus aenean vel. In fermentum et sollicitudin ac orci phasellus egestas. Turpis cursus in hac habitasse platea dictumst quisque sagittis purus. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc mattis enim ut tellus. Ultrices dui sapien eget mi proin sed libero. Vitae tortor condimentum lacinia quis vel eros donec ac odio. Sodales ut eu sem integer vitae justo eget magna. Pellentesque id nibh tortor id aliquet. Sed pulvinar proin gravida hendrerit lectus a.

<p>Sed velit dignissim sodales ut eu sem integer. Senectus et netus et malesuada fames ac. Arcu non sodales neque sodales ut etiam sit amet nisl. Velit scelerisque in dictum non. Integer eget aliquet nibh praesent tristique. Dictumst quisque sagittis purus sit. Quam elementum pulvinar etiam non quam lacus. Ipsum dolor sit amet consectetur adipiscing elit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Velit egestas dui id ornare arcu odio ut sem. Nec dui nunc mattis enim ut tellus elementum sagittis. Nulla facilisi cras fermentum odio. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Magna eget est lorem ipsum. Vitae tortor condimentum lacinia quis vel eros donec ac. Eget egestas purus viverra accumsan in nisl nisi scelerisque eu. Mollis nunc sed id semper risus in. Id nibh tortor id aliquet lectus proin. Netus et malesuada fames ac.
</div>
<div class="col">
<p>Mi ipsum faucibus vitae aliquet nec. Diam vel quam elementum pulvinar etiam non. Sit amet risus nullam eget felis eget nunc lobortis mattis. Integer malesuada nunc vel risus commodo. Ut faucibus pulvinar elementum integer enim neque. Id interdum velit laoreet id donec ultrices tincidunt. Sodales ut etiam sit amet nisl purus in. Et sollicitudin ac orci phasellus egestas. Leo integer malesuada nunc vel risus commodo viverra maecenas. Amet cursus sit amet dictum sit amet. In hac habitasse platea dictumst quisque sagittis purus sit amet. Congue mauris rhoncus aenean vel. Imperdiet proin fermentum leo vel orci porta non. Velit dignissim sodales ut eu. Mauris a diam maecenas sed enim ut sem viverra aliquet. Morbi non arcu risus quis varius quam quisque. Blandit aliquam etiam erat velit scelerisque in. Convallis aenean et tortor at risus viverra adipiscing at in. In hac habitasse platea dictumst vestibulum. Euismod nisi porta lorem mollis aliquam ut porttitor leo a.

<p>Non sodales neque sodales ut etiam sit amet. Quis ipsum suspendisse ultrices gravida dictum fusce ut. Lectus proin nibh nisl condimentum id venenatis a. Turpis nunc eget lorem dolor sed viverra ipsum nunc. Amet volutpat consequat mauris nunc congue nisi vitae suscipit. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Libero id faucibus nisl tincidunt. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Maecenas accumsan lacus vel facilisis volutpat. Bibendum arcu vitae elementum curabitur vitae. Id porta nibh venenatis cras sed felis eget velit. Leo integer malesuada nunc vel. Purus in mollis nunc sed id semper risus in hendrerit. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Eget nunc lobortis mattis aliquam. Suspendisse in est ante in nibh mauris cursus mattis. Nibh mauris cursus mattis molestie a iaculis. Eget dolor morbi non arcu risus quis varius quam quisque. Volutpat maecenas volutpat blandit aliquam etiam erat velit.
    </div>
    </div>
  </div>
  </main>
  <footer class="footer mt-auto py-3">
  <div class="container">
    <span class="text-muted">I'm your footer. Always at the bottom of the screen. When the page content is too tall, I get pushed down. I also adjust my height according to my contents.</span>
  </div>
</footer>

    <!-- Optional JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
  </body>
</html>

关于html - 阻止 Bootstrap 4 页脚上升，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54215003/

文章推荐： javascript - :after triangular shape not able to implement on hover

文章推荐： javascript - 替换或删除查询字符串 javascript

文章推荐： javascript - .然后链接不起作用。为什么？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 阻止 Bootstrap 4 页脚上升