阻止 Bootstrap 4 页脚上升

问题描述 投票：0回答：2

我的 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

非常感谢您的帮助。

html css bootstrap-4
2个回答
2
投票

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

<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>

-1
投票

您可以使用CSS网格。

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-auto-rows: minmax(auto, auto);
}
<body>
  <header>Header</header>
  <main>main</main>
  <footer>footer</footer>
</body>

中 

grid-template-rows: auto 1fr auto;
auto
映射到 
header
和 
footer
，
1fr
映射到您的 
main
内容。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.